KeenSlider.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { useKeenSlider } from 'keen-slider/react';
import 'keen-slider/keen-slider.min.css';

KeenSlider.propTypes = {
  children: PropTypes.node,
};
function KeenSlider({ children, ...props }) {
  const [sliderRef] = useKeenSlider({
    mode: 'free',
  });

  return (
    <div
      css={css`
        position: relative;
      `}
      {...props}
    >
      <div ref={sliderRef}>
        {React.Children.map(children, child =>
          React.cloneElement(
            child,
            { className: `keen-slider__slide ${child.props.className || ''}` },
            child.props.children,
          ),
        )}
      </div>
    </div>
  );
}