滑動滑塊不工作

我想在我的博客中使用滑動滑塊。但是，雖然我在博客中看到它的js（slick.min.js）文件（我看到了firefox開發人員工具），但滑塊仍然無法工作。滑動滑塊不工作

內聯樣式不是我的問題。我的問題是滑塊的功能。

我也添加了slick.css，但沒有改變。

我的博客地址：

30tizen.rozblog.com

問題，品牌持有人在底部

這是華而不實的官方網站： http://kenwheeler.github.io/slick/

<!DOCTYPE html> 
 
<head> 
 
<body> 
 

 
<div style="width: 1140px; margin: 0px auto;" class="bx-wrapper"> 
 
<div style="width: 100%; overflow: hidden; position: relative; height: 71px; transform: translate3d(0px, 0px, 0px);" class="bx-viewport"> 
 

 
    <ul style=" position: relative; transition-duration: 0.5s;" class="slickslider"> 
 

 
    <li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://img.shixon.com/brand/thirrymugler.png" alt="Thierry Mugler" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://img.shixon.com/brand/Lalique.png" alt="Lalique" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/yves.png" data-src="http://img.shixon.com/brand/yves.png" alt="yves saint laurent" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/dg.png" data-src="http://img.shixon.com/brand/dg.png" alt="Dolce & Gabbana" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/giorgio_armnai.png" data-src="http://img.shixon.com/brand/giorgio_armnai.png" alt="Giorgio Armani" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Bershka.png?v=1" data-src="http://img.shixon.com/brand/Bershka.png?v=1" alt="Bershka" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/shifer.png?v=1" data-src="http://img.shixon.com/brand/shifer.png?v=1" alt="Shifer" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"><a href="/page/brand/berttonix/?s=60651" targrt="_blank"> 
 
<img src="http://img.shixon.com/brand/berttonix.png" data-src="http://img.shixon.com/brand/berttonix.png" alt="Berttonix" width="134" height="71"> 
 
</a> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/gucci.png" data-src="http://img.shixon.com/brand/gucci.png" alt="Gucci" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/versace.png" data-src="http://img.shixon.com/brand/versace.png" alt="Versace" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/chanel.png" data-src="http://img.shixon.com/brand/chanel.png" alt="Chanel" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/ck.png" data-src="http://img.shixon.com/brand/ck.png" alt="calvin klein" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/givanchy.png" data-src="http://img.shixon.com/brand/givanchy.png" alt="Givenchy" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/BVLGARI.png" data-src="http://img.shixon.com/brand/BVLGARI.png" alt="BVLgari" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/rayban.png" data-src="http://img.shixon.com/brand/rayban.png" alt="ray ban" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Shiseido.png" data-src="http://img.shixon.com/brand/Shiseido.png" alt="Shiseido" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Azzaro.png" data-src="http://img.shixon.com/brand/Azzaro.png" alt="Azzaro" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/paccorabbane.png" data-src="http://img.shixon.com/brand/paccorabbane.png" alt="Paco Rabanne" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/desquard.png" data-src="http://img.shixon.com/brand/desquard.png" alt="Dsquared" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/thirrymugler.png" data-src="http://img.shixon.com/brand/thirrymugler.png" alt="Thierry Mugler" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Lalique.png" data-src="http://img.shixon.com/brand/Lalique.png" alt="Lalique" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/yves.png" data-src="http://img.shixon.com/brand/yves.png" alt="yves saint laurent" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img class=" lazyloaded" src="http://img.shixon.com/brand/dg.png" data-src="http://img.shixon.com/brand/dg.png" alt="Dolce & Gabbana" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/giorgio_armnai.png" data-src="http://img.shixon.com/brand/giorgio_armnai.png" alt="Giorgio Armani" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Bershka.png?v=1" data-src="http://img.shixon.com/brand/Bershka.png?v=1" alt="Bershka" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/shifer.png?v=1" data-src="http://img.shixon.com/brand/shifer.png?v=1" alt="Shifer" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/berttonix.png" data-src="http://img.shixon.com/brand/berttonix.png" alt="Berttonix" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/gucci.png" data-src="http://img.shixon.com/brand/gucci.png" alt="Gucci" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/versace.png" data-src="http://img.shixon.com/brand/versace.png" alt="Versace" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/chanel.png" data-src="http://img.shixon.com/brand/chanel.png" alt="Chanel" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/ck.png" data-src="http://img.shixon.com/brand/ck.png" alt="calvin klein" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/givanchy.png" data-src="http://img.shixon.com/brand/givanchy.png" alt="Givenchy" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/BVLGARI.png" data-src="http://img.shixon.com/brand/BVLGARI.png" alt="BVLgari" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img class=" lazyloaded" src="http://img.shixon.com/brand/rayban.png" data-src="http://img.shixon.com/brand/rayban.png" alt="ray ban" width="134" height="71"> 
 
</li> 
 
<li style="float: left; list-style: outside none none; position: relative; width: 133.75px; margin-right: 10px;"> 
 
<img src="http://img.shixon.com/brand/Shiseido.png" data-src="http://img.shixon.com/brand/Shiseido.png" alt="Shiseido" width="134" height="71"> 
 
</li> 
 

 
    </ul> 
 
    
 
</div> 
 
    
 
    
 
    
 
<script src="http://rozup.ir/view/590908/jquery-1.11.0.min.js"></script> 
 
<script src="http://rozup.ir/view/1496235/slick.min.js"></script> 
 
    
 
    
 
<script> 
 
$(document).ready(function(){ 
 

 
$('.slickslider').slick({ 
 

 
autoplay: true, 
 
infinite: true, 
 
slidesToShow: 8, 
 
slidesToScroll: 1, 
 
Speed: 2000, 
 
arrows: false, 
 
    
 
}); 
 

 
}); 
 
</script> 
 

 

 
</body> 
 
</html> 
 
</div>

我在等你的答案。謝謝。

來源

2016-04-29 Salim13i

爲什麼使用內聯樣式？ –

我從shixon.com複製了這種風格，但我沒有成功找到他們正在使用的jQuery庫或包。但我發現堆棧滑塊有用和容易在網絡中。 – Salim13i

我認爲你沒有添加slick.css，它必須鏈接 –

我剛剛注入了slick.css到您的網站和光滑的罰款對我來說，所以添加此。

你也加入visible-lg類的你slick（BrandsHolder）的父母，如果你不熟悉自舉。通過添加此類，您可以僅在992px及更高版本中看到該元素。

重要說明：我認爲你應該改變HTML，我可以看到很多meta標籤和所有css文件裏面的body標籤，這是完全錯誤的！

來源

2016-04-29 15:23:29

滑動滑塊不工作

回答

相關問題