I want to create three carousels:
$(document).ready(function() {
$('#c1').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: true
});
$('#c2').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
$('#c3').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});
But when i execute this code, this error message appears:
slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null
I also tried this here:
.not('.slick-initialized').slick()
Then it throws no error, but only the first carousel gets created.
Do you guys have any ideas? Thanks for advance.
I want to create three carousels:
$(document).ready(function() {
$('#c1').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: true
});
$('#c2').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
$('#c3').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});
But when i execute this code, this error message appears:
slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null
I also tried this here:
.not('.slick-initialized').slick()
Then it throws no error, but only the first carousel gets created.
Do you guys have any ideas? Thanks for advance.
Share Improve this question edited Jun 4, 2020 at 12:52 Doruk Eren Aktaş 2,33710 silver badges23 bronze badges asked Oct 18, 2016 at 8:32 balexbalex 2832 gold badges7 silver badges18 bronze badges2 Answers
Reset to default 3Seems like slickslider can't find an object it needs. Make sure the your ID's (c1,c2,c3) exist in your code.
From the official slickslider-page(http://kenwheeler.github.io/slick/):
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
Make sure you don't call the slick() function twice on the same element aswell.
I will suggest another solution with single class or id if our settings are the same for each carousel we want to use:
$(document).ready(function(){
var myCarousel = $(".carousel");
myCarousel.each(function() {
$(this).slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7 * 1000,
mobileFirst: true,
arrows: false
});
});
});