反应光滑不工作答案

【问题标题】：React Slick not working反应光滑不工作
【发布时间】：2017-09-16 11:51:05
【问题描述】：

我是 slick、react 和 react-slick 的新手，我使用 react-slick 制作了一个新组件。当我实现响应式轮播和 CSS（甚至在此之前）时，元素是垂直堆叠的，正如您在 this image 中看到的那样。任何帮助将不胜感激。

【问题讨论】：

请看How to Ask和minimal reproducible example
请上传您的代码，让问题更清晰。

标签： css reactjs

【解决方案1】：

最好添加你的代码... 无论如何，这里是 React Slick 的一个示例：

html:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

js:

var ReactSlickDemo = React.createClass({
  render: function() {
    var settings = {
        dots: true
    }
    return (
        <div className='container'>
        <Slider {...settings}>
            <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
        </Slider>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactSlickDemo />,
  document.getElementById('container')
);

css:

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

来自here

【讨论】：

【解决方案2】：

尝试连接css文件

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

或

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

然后你可以覆盖 usig 类

【讨论】：

【解决方案3】：

正确安装请参考官方文档： https://react-slick.neostack.com/docs/get-started

确保您已完成以下步骤：

安装依赖项：

yarn add react-slick
yarn add slick-carousel

导入 CSS

@import "~slick-carousel/slick/slick.css"; 
@import "~slick-carousel/slick/slick-theme.css";

【讨论】：

谢谢，亲爱的你救了我的客户。

【解决方案4】：

需要考虑的几点：

1- 确保安装并导入正确的文件

npm install react-slick --save
npm install slick-carousel


// Import the Component and the css files in your MyComponent.jsx file
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

注意：如果您使用的是 Typescript，您可能还需要安装 @types：

npm install @types/react-slick --save

2- 请记住，您不必向父容器添加 flex 或类似的东西，因为库已经将元素本身定位，所以如果您有一个带有 flex 删除它。

3- 确保将正确的设置传递给组件，尤其是slidesToShow: x

例如：

const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1
    };

    <Slider {...settings}>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </Slider>

【讨论】：

【解决方案5】：

请确保您在 js 或 jsx 文件中导入以下内容：-

导入“slick-carousel/slick/slick.css”；

导入“slick-carousel/slick/slick-theme.css”；

请更新您的 Jsx，如下所示：-

<div className="slider-container">
<Slider {...settings}>
            <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
          <div><img src='http://placekitten.com/g/400/200' /></div>
        </Slider>

</div>

在下面添加CSS：-

.slider-container {
  display: inline-block;
}

【讨论】：