Reactjs光滑的幻灯片 [英] Reactjs slick slide

问题描述

我正在使用 reactstrap (bootstrap)在reactjs中制作一个非常简单的滑块.

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

 < CarouselItemonExiting = {this.onExiting}onExited = {this.onExited}key = {item.src}>< img width ="100％" src = {item.src} alt = {item.altText}/><轮播字幕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的新手，请考虑这个问题并帮助我实现此行为.

解决方案

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

 从'react-slick'导入Slider;导出默认功能Slide(){常量设置= {点:假，无限:是的，速度:500，slidesToShow:4slidesToScroll:1};返回 (<滑块{...设置}>< div>< h3> 1</h3></div>< div>< h3> 2</h3></div>< div>< h3> 3</h3></div>< div>< h3> 4</h3></div></Slider>);} 

I am making a very simple slider in reactjs using reactstrap(bootstrap)..

Working Example: 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>

Here each image gets slide when we click on the indicator or else the control but I don't want this behaviour.

I would like do have exactly like in the link https://react-multi-carousel.now.sh/

Here in this link we can move the slide using mouse sliding left and right..

So I would like to achieve the same using reactstrap in reactjs..

Any modifications to the existing implementation would also welcome (strictly no jquery) but I need to achieve the slick like behaviour with this reactstrap carousel implementation.

I have implemented the above sample from official reactstrap : https://reactstrap.github.io/components/carousel/ , So the properties mentioned by them have been used in my example as well..

As I am new in reactjs and reactstrap please consider this question and help me to achieve this behaviour..

解决方案

I would recommend you to use react-slick to achieve similar behavior. You can add properties in settings object to show number of elements on each slide. 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光滑的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！