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

Question

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

Since no one answered and still there might be some people checking this post out, this issue has been raised github.com/leandrowd/react-responsive-carousel/issues/674 at previous versions of the carousel (3.2.22). Im using 3.2.23 just now and I experience the same issue. What I can recommend is to install version @3.2.21 specifically. — Nex
– Nex, Commented Jan 30, 2024 at 15:43

Abdur Rehman · Accepted Answer · 2024-05-09 16:35:50Z

1

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

const App = () => {
    return (
        <Carousel    
            showArrows={true}
            showStatus={false}
            showThumbs={false}
            infiniteLoop={true}
            autoPlay={true}
            interval={2000}
        >
            <div>
                <img src="./img-1.jpg" alt="Image 1" />
            </div>
            <div>
                <img src="./img-2.jpg" alt="Image 2" />
            </div>
            <div>
                <img src="./img-3.jpg" alt="Image 3" />
            </div>       
        </Carousel>
    );
};

export default App;

Add these props

answered May 9, 2024 at 16:35

Abdur Rehman

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

ami_PBJ · Accepted Answer · 2024-08-07 19:43:18Z

1

The current version of react-responsive-carousel is 3.2.23 and it has an issue regarding infiniteLoop of Carousel Slider (circular slide). The Carousel doesn't go in a loop, instead of being continuous, it jumps from the last slide to the first or from the first slide to the last.

But in the previous version of react-responsive-carousel : 3.2.21, infiniteLoop was working fine.

So the better solution is to downgrade the current version, 3.2.23 to 3.2.21.

Installation:

npm install [email protected]

answered Aug 7, 2024 at 19:43

ami_PBJ

12912 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related