反应灵巧的行数

Question

我想在我的react应用中添加圆滑的旋转木马。这是源码：

http://kenwheeler.github.io/slick/

我发现了react-slick，但在基本代码中，它可以添加多行(响应式)

在react-slick组件中，这是不可能的https://github.com/akiran/react-slick/issues/502

如何将react中的slick库与源代码中存在的所有选项一起使用。

Answer 1

您应该将以下内容添加到设置变量中：

rows: 2
slidesPerRow: 1

Answer 2

I have implemented slick carousel in my react app. Please find below code : 

class SimpleSlider extends React.Component {
 render() {
      var settings = {
      dots: true,
      autoplay: true,
      arrows: true
    };

    return (
      <Slider {...settings}>
          <div><img src='../../src/assets/1.jpg' /></div>
          <div><img src='../../src/assets/2.jpg' /></div>
          <div><img src='../../src/assets/3.jpg' /></div>
          <div><img src='../../src/assets/4.jpg' /></div>
        </Slider>
    );
}
}

If you want to add rows dynamically you can add that as well, you will need to make single row as a template in JavaScript and append it inside <Slider> component dynamically. Hope this would be helpful to you.

Answer 3

巧妙地更新当前行，而不是每行都被查看。显示den的多行2仍然必须一次移动两张幻灯片，但只能更新2张幻灯片而不是4张