使用滑动滑块

我正在尝试使用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>

来源

2016-11-06 abu abu

为了获得流畅的工作，您必须在包含Slick脚本之前包含jQuery库。

来源

2016-11-06 14:43:38

使用滑动滑块

回答

相关问题