时间戳

首页 > 解决方案 > Reactjs 光滑的幻灯片

javascript - Reactjs 光滑的幻灯片

问题描述

我正在使用reactstrap（引导程序）在 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 的新手，请考虑这个问题并帮助我实现这种行为..

标签： javascriptcssreactjstwitter-bootstrapreactstrap

解决方案

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

推荐阅读