Question

我试图创建一个Slick Slider样本，但它无法正常工作。

这是我的代码：

<head>
    <title>Slick Playground</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
</head>
<body>

<section class="regular">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
</section>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).on('ready', function() {
        $(".regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
    });
</script>

</body>

这就是浏览器showing的内容，但它被假设为this。

有人可以解释我，我想如何解决这个问题？

Answer 1

它占据浏览器的整个宽度，因为section标记的默认值是100％宽度。然后，光滑滑块调整div标签的宽度以填充空间。尝试在CSS中的section标记上设置一个小宽度

Slick Slider没有按原样进行初始化

1 个答案: