Reactjs 光滑的幻灯片

我正在使用reactjs制作一个非常简单的滑块reactstrap（引导程序）..

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

    <CarouselItem
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
      <img width="100%" src={item.src} alt={item.altText} />
      <CarouselCaption
        captionText={item.caption}
        captionHeader={item.caption}
      />
    </CarouselItem>

当我们点击时，每个图像都会幻灯片indicator否则control但我不想要这种行为。

我希望有与链接中完全相同的内容https://react-multi-carousel.now.sh/ https://react-multi-carousel.now.sh/

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

所以我想在reactjs中使用reactstrap来实现同样的效果。

对现有实现的任何修改也将受到欢迎（严格禁止jquery），但我需要通过此reactstrap carousel实现来实现光滑的行为。

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

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

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