反应敏捷如何启用无暂停

Question

我正在尝试创建无限幻灯片而不暂停 这是我对反应光滑滑块的设置

const settings = {
  infinite: true,
  slidesToShow: 3,
  autoplay: true,
  speed: 5000,
  autoplaySpeed: 0,
  arrows: false,
  slidesToScroll: 4,
  easing: "linear"
};

这是我能够实现的最接近的目标，但我 仍然有轻微的停顿

我想知道这是否可以通过react-slick实现，或者也许还有其他库可以满足我的需求

Answer 1

试试这个：

const settings = {
  slidesToShow: 3,
  slidesToScroll: 1,
  infinite: true,
  autoplay: true,
  speed: 10000,
  autoplaySpeed: 0,
  cssEase: 'linear',
  arrows: false,
};

Answer 2

{dots: false,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  initialSlide: 0,
  arrows: false,
  autoplay: true,
  speed: 2000,
  autoplaySpeed: 2000,
  cssEase: "linear",}

我认为速度和自动播放速度应该具有相同的值，这对我有用 https://react-slick.neostack.com/docs/example/auto-play/

Answer 3

正如哈雷尔提到的，

最后一张图像之后仍然有轻微的延迟。有什么办法可以避免吗？

要解决此问题，请使用最新版本的react-slick。目前0.30.2版本运行顺利。我在 0.29.0 版本中也遇到了延迟。

这是我的设置：

<Slider
    infinite
    autoplay
    centerMode
    variableWidth
    speed={5000}
    autoplaySpeed={0}
    cssEase="linear"
    draggable={false}
    arrows={false}
    swipe={false}
  >