Question

我想在我的博客中使用光滑的滑块。但是当我在博客中看到它的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>

我在等你的答案。谢谢。

Answer 1

我刚刚将slick.css注入您的网站并且光滑的工作对我来说很好，所以添加它。

如果您不熟悉bootstrap，还可以将visible-lg类添加到slick（BrandsHolder）的父级。通过添加此类，您只能在992px及更高版本中看到该元素。

重要提示：我认为您应该更改HTML，我可以在meta标记内看到很多css标记和所有body个文件，这是完全错误的！

光滑的滑块不工作

1 个答案: