Menu
I am trying to implement slick slider into my application, but it has not effect at all. There is no error returned in the console and everything looks OK to me.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
test
</div>
<div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
test
</div>
<div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
test
</div>
<div class="variants" style="cursor:pointer;border:1px solid #CDCDCD;width:192px; height:223px;float:left;">
test
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.variants').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2
});
});
</script>
</body>
</html>I need to keep 4.01 in place and hope this is not the issue. All files are loaded OK. Why is the slider not showing?
955
Now that you have fixed the order of scripts in your question the issue is due to how you instantiate the slick() slider. You're calling it on the elements to slide instead of on a single containing element. Try this instead:
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});html,
body {
padding: 20px;
background-color: #CCC;
}
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
