Salim13i Salim13i - 7 months ago 14
Javascript Question

slick slider not working

I want to use slick slider in my blog. But while I see its js (slick.min.js) file in the blog (I saw by firefox developer tool), the slider is still not working.

inline styles is not my problem. my problem is the functionality of the slider.

I added slick.css too but nothing changed.

my blog address:

30tizen.rozblog.com

problem in brands holder in bottom

this is slick official web:
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>





I am waiting your answers. Thanks.

Answer

I just injected slick.css to your site and slick worked fine for me, so add this.

enter image description here

Also you added visible-lg class to the parent of your slick (BrandsHolder), if you are not familiar with bootstrap. by adding this class, you can see the element only in 992px and above.

Important: I think you should change the HTML, I can see lot of meta tags and all css files inside body tag, it's completely wrong !!!

Comments