Circular slides?

First, thank your guys for this project, this is an awesome slide component I needed.

But I have a problem, this is my custom code from Demo 7 autoplay

      <div style={styles.root}>
        <AutoPlaySwipeableViews index={index} onChangeIndex={this.handleChangeIndex} interval={1000} autoplay={true}>
          <div style={Object.assign({}, styles.slide, styles.slide1)}>
            slide n°1======
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide2)}>
            slide n°2==============
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide3)}>
            slide n°3=======================
          </div>
        </AutoPlaySwipeableViews>
        <Pagination
          dots={3}
          index={index}
          onChangeIndex={this.handleChangeIndex}
        />
      </div>

In PC, it works well, I don’t neet touch event, slide n°3 can swipe to slide n°1.

But in mobile web, I use touch event. I swipe to last one: slide n°3, then I can’t swipe to the first slide: slide n°1, and slide n°1 also can’t swipe to slide n°3 using touch event , is it a bug ?

I have found similar issues, https://github.com/oliviertassinari/react-swipeable-views/issues/169, https://github.com/oliviertassinari/react-swipeable-views/issues/22 but they seems different from my problem.

[oliviertassinari]

Here is an example of implementation with 3 different slides:

import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import virtualize from 'react-swipeable-views/lib/virtualize';
import mod from 'react-swipeable-views/lib/utils/mod';

const EnhancedSwipeableViews = virtualize(SwipeableViews);

function slideRenderer(params) {
  const {
    index,
    key,
  } = params;

  switch (mod(index, 3)) {
    case 0:
      return (
        <div key={key}>
          {'slide n°1'}
        </div>
      );

    case 1:
      return (
        <div key={key}>
          {'slide n°2'}
        </div>
      );

    case 2:
      return (
        <div key={key}>
          {'slide n°3'}
        </div>
      );

    default:
      return null;
  }
}

const DemoHocs = () => (
  <EnhancedSwipeableViews slideRenderer={slideRenderer} />
);

export default DemoHocs;

This API has some pros and cons

Pros

• Rendering an arbitrary high number of slides isn’t going to have a negative impact on performance. We have majored the complexity.
• We have a better control on the React lifecycles rendering process. E.g. We could add an extra performance optimization layer by caching answer of the slideRenderer callback property.

Cons

• There is more boilerplate in the API.
• The API is less user-friendly.

[scurrilus-funke]

For those who looking for a solution for dynamic infinit loop without switch case. Just use a small calculation. Get index subtract it with your data length and multiply it with how often data length take place in your current index.

Based on “Example with virtualize” https://www.npmjs.com/package/react-swipeable-views/v/0.8.1

Example:

const dataIndex= Math.abs(index - data.length * Math.floor(index / data.length));

// index = 6, data.lenght = 4
dataIndex= Math.abs(6 - 4 * Math.floor(6 / 4))
dataIndex= Math.abs(2 * 2)
dataIndex = Math.abs(2 * 1)
dataIndex = 2

data[2].title =  "Test C"

Math.abs converts the value to positiv integer. Math.floor Round a number downward to its nearest integer.

The dataIndex can be used as selector.

data[dataIndex].title

import React from "react";
import SwipeableViews from "react-swipeable-views";
import { virtualize } from "react-swipeable-views-utils";

const data = [
    {
      title: "Test A"
    },
    {
      title: "Test B"
    },
    {
      title: "Test C"
    },
    {
      title: "Test D"
    }
  ];

const VirtualizeSwipeableViews = virtualize(SwipeableViews);

const SwiperCarousel = () => {
    const slideRenderer = ({ key, index }) => {
        const dataIndex = Math.abs(
        index - data.length * Math.floor(index / data.length)
    );
    return <div key={key}>{`slide: ${data[dataIndex].title}`}</div>;
  };
  return (
    <VirtualizeSwipeableViews
      slideRenderer={slideRenderer}
      enableMouseEvents
    />
  );
};

export default SwiperCarousel;