时间戳

首页 > 解决方案 > 有没有办法在 react-responsive-carousal 中为每张幻灯片设置不同的时间间隔？

reactjs - 有没有办法在 react-responsive-carousal 中为每张幻灯片设置不同的时间间隔？

问题描述

问题：

我创建了一个反应响应轮播。它的代码是这样的。

import React, { Component } from "react";
import { Carousel } from "react-responsive-carousel";

class Slider extends Component {
  componentDidMount() {
    setInterval(this.reload, 900000);
  }

  reload = () => {
    window.location.reload(true);
  };

  render() {
    const { height } = this.props;

    return (
      <div>
        <Carousel
          autoPlay={true}
          showArrows={false}
          infiniteLoop={true}
          interval={120000}
          stopOnHover={false}
          showThumbs={false}
          showStatus={false}
          showIndicators={false}
        >
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
        </Carousel>
      </div>
    );
  }
}

export default Slider;

有人可以说有没有办法为每张幻灯片设置不同的时间间隔？我搜索了很多以找出是否有办法做到这一点，但我无法找到任何线索来确定它是否可以完成。因此，如果有人可以帮助我，那真的很有帮助。谢谢你。

标签： reactjs

解决方案

' CarousalsonChange为您提供索引和项目节点。所以请执行以下操作。

  • 为每个 carousal div 设置一个自定义属性data-interval。
  • 维护一个本地状态来控制自动播放的间隔
  • onChange根据轮播正在播放的图像/div更新本地状态。

查看工作代码

代码片段

import React, { useState } from "react";
import { Carousel } from "react-responsive-carousel";

export default () => {
  const [intervalz, setIntervalz] = useState(3000); //initial state here represents the interval for first image.

  const onChange = (index, item) => {
    setIntervalz(item.props["data-interval"]);
  };
  return (
    <Carousel
      onChange={onChange}
      autoPlay
      interval={intervalz}
      infiniteLoop={true}
    >
      <div data-interval={3000}>
        <img alt="" src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
        <p className="legend">Legend 1</p>
      </div>
      <div data-interval={5000}>
        <img alt="" src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg" />
        <p className="legend">Legend 2</p>
      </div>
      <div data-interval={1000}>
        <img alt="" src="http://lorempixel.com/output/cats-q-c-640-480-3.jpg" />
        <p className="legend">Legend 3</p>
      </div>
    </Carousel>
  );
};

推荐阅读