feature: infinite scroll works with swiping as well as buttons (#204)

Author: mariohoyos92

src/App/examples/Example12/Example12.jsx

@@ -18,9 +18,10 @@ export default () => (
   >
     <h2 className={s.headline}>Infinite Carousel</h2>
     <p>
-      A carousel that returns to the first slide if the user clicks the Next button while on the
-      last slide and returns to the last slide if the user clicks the Back
-      button while on the first slide.
+      A carousel that returns to the first slide if the user clicks the Next
+      button while on the last slide and returns to the last slide if the user
+      clicks the Back button while on the first slide. Also behaves similarly
+      with swiping left on the first image or right on the last image.
     </p>
     <Slider className={s.slider}>
       <Slide index={0}>

src/Slider/Slider.jsx

@@ -21,6 +21,7 @@ const Slider = class Slider extends React.Component {
     dragEnabled: PropTypes.bool.isRequired,
     dragStep: PropTypes.number,
     hasMasterSpinner: PropTypes.bool.isRequired,
+    infinite: PropTypes.bool,
     interval: PropTypes.number.isRequired,
     isPageScrollLocked: PropTypes.bool.isRequired,
     isPlaying: PropTypes.bool.isRequired,
@@ -64,6 +65,7 @@ const Slider = class Slider extends React.Component {
     disableAnimation: false,
     disableKeyboard: false,
     dragStep: 1,
+    infinite: false,
     moveThreshold: 0.1,
     onMasterSpinner: null,
     privateUnDisableAnimation: false,
@@ -456,12 +458,21 @@ const Slider = class Slider extends React.Component {
       this.props.totalSlides, this.props.visibleSlides,
     );
 
-    const currentSlide = boundedRange({
+    let currentSlide = boundedRange({
       min: 0,
       max: maxSlide,
       x: (this.props.currentSlide + slidesMoved),
     });
 
+    if (this.props.infinite) {
+      if (this.props.currentSlide >= maxSlide && slidesMoved > 0) {
+        currentSlide = 0;
+      }
+      if (this.props.currentSlide === 0 && slidesMoved < 0) {
+        currentSlide = maxSlide;
+      }
+    }
+
     this.props.carouselStore.setStoreState({
       currentSlide,
     });

src/Slider/__tests__/Slider.test.jsx

@@ -628,6 +628,42 @@ describe('<Slider />', () => {
       expect(props.carouselStore.state.currentSlide).toBe(3);
     });
 
+    it('Should set the slider to last set of visible slides on touchend when dragging the slider past the start of the slide show and infinite is set to true.', () => {
+      const wrapper = mount(<Slider {...props} infinite currentSlide={0} />);
+      const instance = wrapper.instance();
+      wrapper.setState({
+        deltaX: 1000,
+        deltaY: 0,
+      });
+      wrapper.update();
+      instance.sliderTrayElement = {
+        clientWidth: 500,
+        clientHeight: 100,
+      };
+      wrapper.find('.sliderTray').simulate('touchend', { targetTouches: [] });
+      expect(props.carouselStore.state.currentSlide).toBe(
+        props.totalSlides - props.visibleSlides,
+      );
+    });
+
+    it('Should set the slider to first set of visible slides on touchend when dragging the slider past the end of the last slide and infinite is set to true.', () => {
+      const wrapper = mount(
+        <Slider {...props} infinite currentSlide={props.totalSlides - 1} />,
+      );
+      const instance = wrapper.instance();
+      wrapper.setState({
+        deltaX: -1000,
+        deltaY: 0,
+      });
+      wrapper.update();
+      instance.sliderTrayElement = {
+        clientWidth: 500,
+        clientHeight: 100,
+      };
+      wrapper.find('.sliderTray').simulate('touchend', { targetTouches: [] });
+      expect(props.carouselStore.state.currentSlide).toBe(0);
+    });
+
     it('should not change the state at all when touchEnd and touchEnabled prop is false', () => {
       const wrapper = shallow(<Slider {...props} touchEnabled={false} />);
       // nonsense values to test that slider state is not reset on touchend

src/Slider/index.js

@@ -8,6 +8,7 @@ export default WithStore(Slider, state => ({
   disableKeyboard: state.disableKeyboard,
   dragEnabled: state.dragEnabled,
   hasMasterSpinner: state.hasMasterSpinner,
+  infinite: state.infinite,
   interval: state.interval,
   isPageScrollLocked: state.isPageScrollLocked,
   isPlaying: state.isPlaying,

src/helpers/component-config.js

@@ -153,6 +153,7 @@ export default {
       dragEnabled: true,
       hasMasterSpinner: false,
       interval: 5000,
+      infinite: false,
       isPageScrollLocked: false,
       isPlaying: false,
       lockOnWindowScroll: false,