resources/js/components/common/Slider.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3
   4 const Slider = ({ children, duration, vertical }) => {
   5         const [index, setIndex] = React.useState(0);
   6
   7         React.useEffect(() => {
   8                 const interval = setInterval(() => {
   9                         setIndex(i => (i + 1) % React.Children.count(children));
  10                 }, duration);
  11                 return () => {
  12                         clearInterval(interval);
  13                 };
  14         }, [React.Children.count(children), duration]);
  15
  16         return <div className={`slider-container ${vertical ? 'vertical' : 'horizontal'}`}>
  17                 <div className="slider-slides" style={{
  18                         transform: vertical ? `translateY(${-index * 100}%)` : `translateX(${-index * 100}%)`
  19                 }}>
  20                         {children}
  21                 </div>
  22         </div>;
  23 };
  24
  25 Slider.propTypes = {
  26         children: PropTypes.node,
  27         duration: PropTypes.number,
  28         vertical: PropTypes.bool,
  29 };
  30
  31 Slider.defaultProps = {
  32         duration: 2500,
  33 };
  34
  35 const Slide = ({ children }) => {
  36         return <div className="slider-slide">
  37                 {children}
  38         </div>;
  39 };
  40
  41 Slide.propTypes = {
  42         children: PropTypes.node,
  43 };
  44
  45 Slider.Slide = Slide;
  46
  47 export default Slider;