Question

尝试学习用于创建旋转木马/滑块的slick.js，jquery插件。但是，虽然我认为这对于web-dev中的常见任务来说是一个简单易用的解决方案，但事实并非如此，特别是像我这样的初学者。

所以，我设计的环境就像在这里光滑的文档中提出的那样： http://kenwheeler.github.io/slick/

我想制作一个像这样的旋转木马 - 用于练习。 Slider example

所以，没什么特别的，连续4张图片，1对1滚动，无限循环，滑块左侧和右侧有箭头。

听起来非常简单，据我所能想象的那样，阅读光滑的文档，但这一切都是相反的。

$(document).ready(function () {
    $('.sl').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true
    });
});

body {
    background-color: lightgrey;
}

.main {
    max-width: 800px;
    margin: 20px auto;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="slick/themes/slick-theme.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

    <div class="main">
        <div class="sl">
            <div class="slider__item">
                <img src="img/slider-item1.png" alt="beige coat" class="slider__photo">
                <p class="slider__caption">Beige coat</p>
            </div>

            <div class="slider__item">
                <img src="img/slider-item2.png" alt="grey coat" class="slider__photo">
                <p class="slider__caption">Grey coat</p>
            </div>

            <div class="slider__item">
                <img src="img/slider-item3.png" alt="red coat" class="slider__photo">
                <p class="slider__caption">Red coat</p>
            </div>

            <div class="slider__item">
                <img src="img/slider-item4.png" alt="blue coat" class="slider__photo">
                <p class="slider__caption">Blue coat</p>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="slick/slick.js"></script>
    <script src="script.js"></script>
</body>

</html>

结束结果就像，这个 - 没有任何箭头和其他功能......

当我设置slidesToShow：3时，它会出现一些空格并出现箭头，但我无法理解它的行为。

我可以从这个例子中获得一些指导来掌握光滑逻辑吗？

提前谢谢！

Answer 1

添加jquery并检查开发者控制台

我想了解Slick.js

1 个答案: