Reactjs 光滑的幻灯片

Posted 2023-03-06

【中文标题】Reactjs 光滑的幻灯片

【英文标题】：Reactjs slick slide

【发布时间】：2020-04-26 01:15:15

【问题描述】：

我正在使用 reactstrap(bootstrap)..

在 reactjs 中制作一个非常简单的滑块

工作示例：https://codesandbox.io/s/compassionate-***-fz5mm

    <CarouselItem
      onExiting=this.onExiting
      onExited=this.onExited
      key=item.src
    >
      <img  src=item.src alt=item.altText />
      <CarouselCaption
        captionText=item.caption
        captionHeader=item.caption
      />
    </CarouselItem>

当我们点击indicator 或control 时，这里每张图片都会滑动，但我不想要这种行为。

我希望在链接https://react-multi-carousel.now.sh/中拥有一模一样的东西

在此链接中，我们可以使用鼠标左右滑动来移动幻灯片..

所以我想在 reactjs 中使用 reactstrap 来达到同样的效果..

也欢迎对现有实现进行任何修改（严格没有 jquery），但我需要通过这个 reactstrap 轮播实现来实现类似流畅的行为。

我已经从官方reactstrap : https://reactstrap.github.io/components/carousel/ 实现了上面的示例，因此他们提到的属性也已在我的示例中使用..

由于我是 reactjs 和 reactstrap 的新手，请考虑这个问题并帮助我实现这种行为..

【问题讨论】：

好的，是完整的代码吗？ onExiting, onExited 的正文是什么，因为这就是与众不同的原因。

@its4zahoor，是的，这是我的完整代码，正如我所说，我正在使用 reactstrap，属性 onExiting 和 onExited 随之而来。参考：reactstrap.github.io/components/carousel

【参考方案1】：

我建议您使用 react-slick 来实现类似的行为。 您可以在设置对象中添加属性以显示每张幻灯片上的元素数量。 https://react-slick.neostack.com/

import Slider from 'react-slick';

export default function Slide() 
  const settings = 
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1
    ;

  return (
    <Slider ...settings>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </Slider>
      );
    

【讨论】：

我只需要使用 reactstrap 就可以实现这一点，而无需使用其他库..