Reactjs光滑的幻灯片

Question

我正在使用reactstrap（bootstrap）在reactjs中制作一个非常简单的滑块。

工作示例：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/中拥有与我完全一样的东西

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

所以我想在reactjs中使用reactstrap实现相同的目标。

对现有实现的任何修改也将受到欢迎（严格来说，没有jquery，但我需要通过此reactstrap轮播实现来实现类似滑行的行为。

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

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

Answer 1

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>
      );
    }