使用光滑滑块答案

【问题标题】：Using Slick Slider使用光滑滑块
【发布时间】：2016-11-06 13:58:35
【问题描述】：

我正在尝试使用this 滑块。在这方面，我写了下面的代码。但它不起作用。我按照他们的说明包含了 CSS 和 JS 文件。我应该在这里包含 jQuery 吗？任何人都可以帮我解决这个问题吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css' rel='stylesheet' type='text/css'>
    <link href='https://vmcdn.de/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    <style>
        .slick-prev:before, .slick-next:before { color: black; }

        .container{padding-top:50px;}
        .client-text li {left:0;right:0;margin:auto;list-style:none;margin:50px;z-index:9999;color:black;}

        .item{ height: 200px;}
        .one {background-image: url("http://placehold.it/200&text=1"); }
        .two {background-image: url("http://placehold.it/200&text=2"); }
        .three {background-image: url("http://placehold.it/200&text=3"); }
        .four {background-image: url("http://placehold.it/200&text=4"); }
        .five {background-image: url("http://placehold.it/200&text=5"); }
        .six {background-image: url("http://placehold.it/200&text=6"); }
        .seven {background-image: url("http://placehold.it/200&text=7"); }
        .eight {background-image: url("http://placehold.it/200&text=8"); }
        .nine {background-image: url("http://placehold.it/200&text=9"); }
        .ten {background-image: url("http://placehold.it/200&text=10"); }
        .slick-slide{
          width:230px;
        margin-right: 15px;
        margin-left: 15px;
        }


        .triangle{left:0;right:0;margin:auto;width:0;
        height: 0;
        border-style: solid;
        border-width: 15px 15px 0 15px;
        border-color: #333333 transparent transparent transparent;
        }
    </style>
  </head>
  <body>
    <!-- Standard carousel where Slick calculated the best widths to fit. -->
    <div class="container ">
        <div class="row ">
            <div id="carousel" class="carousel col-md-12 ">
                <div class="item one"></div>
                <div class="item two"></div>
                <div class="item three"></div>
                <div class="item four"></div>
                <div class="item five"></div>
                <div class="item six"></div>
                <div class="item seven"></div>
                <div class="item eight"></div>
                <div class="item nine"></div>
                <div class="item ten"></div>
            </div>
            <div class="triangle"></div>

            <p class="current"></p>
            <ul class="client-text">
              <li>0 lorem ipsum</li>
              <li>1 lorem ipsum</li>
              <li>2 lorem ipsum</li>
              <li>3 lorem ipsum</li>
              <li>4 lorem ipsum</li>
              <li>5 lorem ipsum</li>
              <li>6 lorem ipsum</li>
              <li>7 lorem ipsum</li>
              <li>8 lorem ipsum</li>
            </ul>
        </div>    
    </div>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
    <script type="text/javascript" src="https://vmcdn.de/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script>
        $('#carousel').slick({
            arrows: true,
            slidesToShow: 3,
            autoplay: true,
            autoplaySpeed:2500,
            speed: 500,
            variableWidth: true,
            onAfterChange: function(){ 
                  var cat = ($('#carousel').slickCurrentSlide()) + 1;
                  $('.client-text > li').hide();
                  $('.client-text > li:nth-child('+ cat +')').show();
            }
        });

        $('.client-text > li').hide();
        $('.client-text > li:first-child').show();
    </script>
  </body>
</html>

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

为了让 Slick 工作，您必须在包含 Slick 脚本之前包含 jQuery 库。

【讨论】：