我想创建三个轮播:
$(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
});
});
但是当我执行此代码时，出现此错误消息:
slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null
我也在这里尝试过:
.not('.slick-initialized').slick()
然后它不会抛出任何错误，但只创建第一个轮播。
大家有什么想法吗？ 感谢您的提前。
最佳答案
似乎 slickslider 找不到它需要的对象。 确保您的 ID (c1,c2,c3) 存在于您的代码中。
来自官方 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.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/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>
确保不要对同一元素调用 slick() 函数两次。
关于javascript - Slick.js 创建多个轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40103316/