Merge pull request #10 from ItsMrAkhil/auto-slide

Add auto slider functionality

Author: ItsMrAkhil

README.md

@@ -84,6 +84,8 @@ Props | Type | Default Value | Description
 `afterSlide` | `Function` | null | This function will be executed after every sliding is completed
 `beforeSlide` | `Function` | null | This function will be executed before starting every sliding
 `responsive` | `Array` | null | Use this for responsiveness [Documentation](#responsive)
+`autoSlide` | `Number` or `Boolean` | `2000` | Used to make carousel auto slide for every given time interval. Or for 2000ms if the prop value is true.
+`pauseOnMouseOver`| `Boolean` | `true` | Pause auto sliding on mouse over the carousel.
 
 License
 ----

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-styled-carousel",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React styled-components carousel. No css is needed, fully configurable, SSR supported. Theming supported.",
   "main": "build/Slider.js",
   "scripts": {

src/components/Slider.js

@@ -11,6 +11,7 @@ import SliderWrapper from './SliderWrapper';
 import SliderList from './SliderList';
 import Dots from './Dots';
 import DefaultDot from './Dot';
+import Timer from '../utils/Timer';
 
 if (typeof window === 'undefined') {
   global.window = {
@@ -39,14 +40,27 @@ class Slider extends React.Component {
   }
 
   componentDidMount() {
-    const { children, cardsToShow } = this.props;
+    const { children, cardsToShow, autoSlide } = this.props;
     const childrenCount = cardsToShow || (children ? children.length || 1 : 1);
     const childWidth = 100 / childrenCount;
     this.setState({ // eslint-disable-line react/no-did-mount-set-state
       childWidth,
       cardsToShow: childrenCount,
     }, () => this.updateResponsiveView());
     window.addEventListener('resize', this.updateResponsiveView);
+    if (autoSlide) {
+      this.autoSlider = new Timer(() => {
+        let updatedInitialCard = 0;
+        const numberOfChildren = children ? children.length || 1 : 0;
+        if (numberOfChildren - this.state.cardsToShow > this.state.initialCard) {
+          updatedInitialCard = this.state.initialCard + 1;
+        }
+        this.setState({
+          initialCard: updatedInitialCard,
+        });
+      }, (autoSlide === true ? 2000 : autoSlide));
+      this.autoSlider.start();
+    }
   }
 
   componentWillUnmount() {
@@ -164,12 +178,17 @@ class Slider extends React.Component {
     const {
       children, cardsToShow,
       showDots, showArrows,
+      pauseOnMouseOver,
       ...otherProps
     } = this.props;
     const { initialCard, childWidth } = this.state;
     return (
       <React.Fragment>
-        <SliderWrapper {...otherProps}>
+        <SliderWrapper
+          onMouseLeave={() => pauseOnMouseOver && this.autoSlider && this.autoSlider.resume()}
+          onMouseEnter={() => pauseOnMouseOver && this.autoSlider && this.autoSlider.pause()}
+          {...otherProps}
+        >
           {showArrows && this.renderLeftArrow()}
           <SliderTrack>
             <SliderList translateX={initialCard * childWidth}>
@@ -197,6 +216,8 @@ Slider.defaultProps = {
   beforeSlide: null,
   infinite: true,
   responsive: null,
+  autoSlide: 2000,
+  pauseOnMouseOver: true,
 };
 
 Slider.propTypes = {
@@ -211,9 +232,14 @@ Slider.propTypes = {
   beforeSlide: PropTypes.func,
   infinite: PropTypes.bool,
   responsive: PropTypes.arrayOf(PropTypes.shape({
-    breakPoint: PropTypes.number.isRequired,
-    cardsToShow: PropTypes.number.isRequired,
+    breakPoint: PropTypes.number,
+    cardsToShow: PropTypes.number,
   })),
+  autoSlide: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.bool,
+  ]),
+  pauseOnMouseOver: PropTypes.bool,
 };
 
 export default Slider;

src/utils/Timer.js

@@ -0,0 +1,21 @@
+class Timer {
+  constructor(callback, delay) {
+    this.callback = callback;
+    this.delay = delay;
+  }
+
+  pause() {
+    clearInterval(this.timerId);
+  }
+
+  resume() {
+    clearInterval(this.timerId);
+    this.timerId = setInterval(this.callback, this.delay);
+  }
+
+  start() {
+    this.resume();
+  }
+}
+
+export default Timer;