How to make continuous loop of slides in react-responsive-carousel?

801 Views Asked by At

I'm using react-responsive-carousel in my application. When I scroll next in last slide, it moves to first slide. But it goes to first slide passing through all slides in between. How to prevent this behaviour and make it move in a continuous loop(display first slide immediately after the last?

Here is the basic code:

import React from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

const App = () => {
  return (
    <Carouel    
      infiniteLoop={true}
    >
      <div>
        <img src="./img-1.jpg"></img>
      </div>
      <div>
        <img src="./img-2.jpg"></img>
      </div>
      <div>
        <img src="./img-3.jpg"></img>
      </div>       
    </Carousel>
  );
};

export default App;

And here is the link to codesandbox: https://codesandbox.io/s/react-responsive-carousel-complete-demo-8gkkqj?file=/src/App.js:1044-1126&resolutionWidth=320&resolutionHeight=675

0

There are 0 best solutions below