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

我建议您使用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>
      );
    }

Reactjs光滑的幻灯片

1 个答案: