javascript - Return back to first slide when carousel reaches last - Stack Overflow

admin管理员组

文章数量:1357374

I am using in react js project.

The carousel is working as expected but I am in the need to make the carousel to start from first when it reaches the last slide.

Complete working example:

Code:

<Carousel
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

I have added like this,

<Carousel
  infinite={true}
  autoPlay={true}
  autoPlaySpeed={3000}
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

But it automatically creates infinite number of slides but that is not my requirement.. Once it reaches the end then it should get back to first slide after 1 second duration because user needs to move backward n number of times to reach the first slide.

Kindly help me to start from beginning slide once the carousel once it reaches last slide(With some delay like 1000ms so that user can see the last slide for 1s and can view the first after that..

I am using https://www.npmjs./package/react-multi-carousel in react js project.

The carousel is working as expected but I am in the need to make the carousel to start from first when it reaches the last slide.

Complete working example: https://codesandbox.io/s/react-multi-carousel-playground-2c6ye

Code:

<Carousel
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

I have added like this,

<Carousel
  infinite={true}
  autoPlay={true}
  autoPlaySpeed={3000}
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

But it automatically creates infinite number of slides but that is not my requirement.. Once it reaches the end then it should get back to first slide after 1 second duration because user needs to move backward n number of times to reach the first slide.

Kindly help me to start from beginning slide once the carousel once it reaches last slide(With some delay like 1000ms so that user can see the last slide for 1s and can view the first after that..

• javascript
• css
• reactjs
• css-transitions
• carousel

Share Improve this question Follow asked Jan 10, 2020 at 5:53 user12640294user12640294

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can achieve this by writing your own autoloop and by using custom buttons. Honnestly, maybe you should just pick another library that does what you want. But you educationnal purpose, I did an example of what you should have done. Please note that you need to add the CSS for the new button group.

import React, { useEffect, useRef } from "react";
import { render } from "react-dom";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 1,
    paritialVisibilityGutter: 60
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 1,
    paritialVisibilityGutter: 50
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    paritialVisibilityGutter: 30
  }
};
const images = [
  "https://images.unsplash./photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash./photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash./photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
];

  /* ADD THIS LINE */
  // Your custom Button group. CSS need to be added
const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {
  const {
    carouselState: { currentSlide }
  } = rest;
  const lastImageIndex = images.length - 1;
  return (
    <div className="carousel-button-group" style={{ position: "absolute" }}>
      <button
        onClick={() =>
          currentSlide === 0 ? goToSlide(lastImageIndex) : previous()
        }
      >
        Prev
      </button>
      <button
        onClick={() =>
          currentSlide === lastImageIndex ? goToSlide(0) : next()
        }
      >
        Next
      </button>
    </div>
  );
};
  /* TO THIS LINE */

const Simple = ({ deviceType }) => {
  /* ADD THIS LINE */
  const carousel = useRef(null);
  const lastImageIndex = images.length - 1;

  useEffect(() => {
    const autoloop = setInterval(() => {
      if (carousel.state.currentSlide === lastImageIndex) {
        carousel.goToSlide(0);
      } else {
        carousel.next();
      }
    }, 3000); // Your custom auto loop delay in ms
    return () => clearInterval(autoloop);
  }, []);
  /* TO THIS LINE */

  return (
    <Carousel
      ssr
      deviceType={deviceType}
      itemClass="image-item"
      responsive={responsive}
      /* ADD THIS LINE */
      ref={el => (carousel = el)}
      arrows={false}
      customButtonGroup={<ButtonGroup />}
      /* TO THIS LINE */
    >
      {images.slice(0, 5).map((image, index) => {
        return (
          <div key={index} style={{ position: "relative" }}>
            <img
              draggable={false}
              alt="text"
              style={{ width: "100%", height: "100%" }}
              src={image}
            />
            <p
              style={{
                position: "absolute",
                left: "50%",
                bottom: 0,
                color: "white",
                transform: " translateX(-50%)"
              }}
            >
              Legend:{index}.
            </p>
          </div>
        );
      })}
    </Carousel>
  );
};

render(<Simple />, document.getElementById("root"));

Hope it helps. Happy coding :)

I believe the best option now is to use this prop:

infiniteLoop: true

Reference: https://github./leandrowd/react-responsive-carousel/issues/232

The simplest solution to this problem is to add infiniteloop props as true.

<Carousel infiniteLoop={true} autoPlay={true} interval={1000}>
  <div>
    <img src={slider1} />
    <p className='legend'>Legend 1</p>
  </div>
  <div>
    <img src={slider2} />
    <p className='legend'>Legend 2</p>
  </div>
</Carousel>

本文标签： javascriptReturn back to first slide when carousel reaches lastStack Overflow