当我在 javascript 中添加自动播放为 true 时，如何自动播放此滑块，然后滑块不起作用，我如何解决此问题。jQuery(document).ready(function($) { $('.banner_slider').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.thumbnail_slider'});$('.thumbnail_slider').slick({ slidesToShow: 6, slidesToScroll: 1, asNavFor: '.banner_slider', dots: false, arrows: false, centerMode: true, focusOnSelect: true, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: false, arrows: false, } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); }); *{ box-sizing: border-box;}img { max-width:100%;}.slider_wrap{ position:relative;}.thumbnail_slider_area { position:absolute; left:0; bottom:0; width:100%; z-index:1;}.thumbnail_slider{ border:1px solid #000; padding:1px;}.thumbnail_slider .col{ padding:5px;} <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="slick.css" /><script type="text/javascript" src="slick.js"></script>当我在 javascript 中添加自动播放为 true 时，如何自动播放此滑块，然后滑块不起作用，我如何解决此问题。
1 回答
梦里花落0921
TA贡献1772条经验 获得超6个赞
工作示例：
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
img {
max-width:100%;
}
.slider_wrap{
position:relative;
}
.thumbnail_slider_area {
position:absolute;
left:0;
bottom:0;
width:100%;
z-index:1;
}
.thumbnail_slider{
border:1px solid #000;
padding:1px;
}
.thumbnail_slider .col{
padding:5px;
}
</style>
</head>
<body>
<div class="saved"></div>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>
<div class="slider_wrap">
<div class="banner_slider">
<img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />
</div>
<div class="row thumbnail_slider_area">
<div class="container">
<div class="row thumbnail_slider">
<div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('.banner_slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumbnail_slider'
});
$('.thumbnail_slider').slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: '.banner_slider',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
//autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false,
arrows: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
</body>
</html>
- 1 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消