Вернитесь к первому слайду, когда карусель достигнет последней - PullRequest
Новая
       6

Вернитесь к первому слайду, когда карусель достигнет последней

1 голос
/ 10 января 2020

Я использую https://www.npmjs.com/package/react-multi-carousel в проекте js.

Карусель работает, как и ожидалось, но мне нужно, чтобы карусель запускалась с первого раза, когда она достигает последнего слайда.

Полный рабочий пример: https://codesandbox.io/s/react-multi-carousel-playground-2c6ye

Код: 

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

Я добавил вот так: 

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

Но он автоматически создает бесконечное количество слайдов, но это не мое требование. Как только он достигнет конца, он должен вернуться к первому слайду через 1 секунду. длительность, потому что пользователю нужно двигаться назад n количество раз, чтобы достичь первого слайда.

Пожалуйста, помогите мне начать с начала слайда, как только карусель достигнет последнего слайда (с некоторой задержкой, например, 1000 мс, чтобы пользователь может видеть последний слайд в течение 1 с и может просматривать первый после этого ..

1 Ответ

1 голос
/ 10 января 2020

Вы можете добиться этого, написав свой собственный autol oop и используя пользовательские кнопки . Честно говоря, может быть вы должны просто выбрать другую библиотеку, которая делает то, что вы хотите . Но с твоей образовательной целью я сделал пример того, что ты должен был сделать. Обратите внимание, что вам нужно добавить CSS для новой группы кнопок. 

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.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/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"));

Надеюсь, это поможет. Удачного кодирования:)

...