javascript - Slick carousel - 使用 3 张幻灯片和 autoPlay=true 会导致滑块导航的行为就像有 5 张幻灯片一样
问题描述
我正在使用 Slick carousel 并想显示 3 张照片。我在底部滑块导航窗格中显示了 3 张照片。如果我设置slidesToShow = 2,一切都按预期工作,但是当slidesToShow = 3(等于幻灯片总数)时,幻灯片在底部导航中显示2张空白幻灯片,即使它在顶部滑块中仅正确显示3张主幻灯片-对于窗格。
我意识到如果我将 autoplay=false 设为预期,那么它会按预期工作,但我正在显示我想自动循环播放的照片之前/期间/之后,因此客户可以在拥有它的同时在导航幻灯片中看到所有可能的选择自动播放。
任何想法如何让它发挥作用?我看到有人提到不应该这样做,但这似乎是一个有价值的用例。至少在我的情况下。我很感激!
$('.slider-for').slick({
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
arrows: true,
fade: true,
asNavFor: '.slider-nav' /* the child Nav bar */
});
$('.slider-nav').slick({ /* the Nav display with thumbnails */
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for', /* the parent slider */
dots: false,
focusOnSelect: true,
arrows: false,
infinite: true
});
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
.description {
background: #fff;
color: black;
font-size: 20px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.main h3 {
background: #fff;
color: black;
font-size: 20px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slicktheme.css"/>
</head>
<body>
<header>
</header>
<main>
<section class="main" align="center">
<div class="slider slider-for">
<div>
<img src="images/Siding/ChimneyRottingHoles.jpg"alt="Chimney with Hardboard Siding Rotting with holes">
</div>
<div>
<img src="images/Siding/Chimney New Flashing.jpg"
alt="Chimney replaced with new hardboard siding, new flashing and new cedar trim boards">
</div>
<div>
<img src="images/Siding/Chimney Cedar New Paint.jpg"
alt="Chimney and cedar trim repainted with Sherwin Williams Exterior Super Paint in a Satin finish">
</div>
</div>
<div class="slider slider-nav">
<div class="description">Rotted Siding with Holes
<h3 style="background-image: url('images/Siding/Chimney Rotting Holes.jpg'); background-size: cover">
</h3>
</div>
<div class="description">New Siding & Flashing
<h3 style="background-image: url('images/Siding/Chimney New Flashing.jpg'); background-size: cover">
</h3>
</div>
<div class="description">Painted in Satin Finish
<h3 style="background-image: url('images/Siding/Chimney Cedar New Paint.jpg'); background-size: cover">
</h3>
</div>
</div>
</section>
</main>
<footer>
</footer>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
arrows: true,
fade: true,
asNavFor: '.slider-nav' /* the child Nav bar */
});
$('.slider-nav').slick({
/* the Nav display with thumbnails */ slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for', /* the parent slider */
dots: false,
focusOnSelect: true,
arrows: false,
infinite: true
});
</script>
</body>
</html>
解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">
</script>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
<style>
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
.description {
background: #fff;
color: black;
font-size: 20px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.main h3 {
background: #fff;
color: black;
font-size: 20px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
body {
background-color: #dfdfdf;
}
</style>
</head>
<body>
<main>
<section class="main" align="center">
<div class="slider slider-for">
<div><img src="images/Siding/Chimney Rotting Holes.jpg" alt="Chimney with Hardboard Siding Rotting with holes"></div>
<div><img src="images/Siding/Chimney New Flashing.jpg" alt="Chimney replaced with new hardboard siding, new flashing and new cedar trim boards"></div>
<div><img src="images/Siding/Chimney Cedar New Paint.jpg" alt="Chimney and cedar trim repainted with Sherwin Williams Exterior Super Paint in a Satin finish"></div>
</div>
<div class="slider slider-nav">
<div class="description">Rotted Siding with Holes<h3 style="background-image: url('images/Siding/Chimney Rotting Holes.jpg'); background-size: cover"> </h3></div>
<div class="description">New Siding & Flashing<h3 style="background-image: url('images/Siding/Chimney New Flashing.jpg'); background-size: cover"> </h3></div>
<div class="description">Painted in Satin Finish<h3 style="background-image: url('images/Siding/Chimney Cedar New Paint.jpg'); background-size: cover"> </h3></div>
</div>
</section>
</main>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
arrows: true,
fade: true,
asNavFor: '.slider-nav' /* the child Nav bar */
});
$('.slider-nav').slick({ /* the Nav display with thumbnails */
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider-for', /* the parent slider */
dots: false,
focusOnSelect: true,
arrows: false,
infinite: true
});
</script>
</div>
</body>
</html>
推荐阅读
- java - spring mvc中的Beancreation异常
- java - MySql 和 java {获取相关表列}
- apache-kafka - Kafka 连接集群设置或启动连接工作人员
- java - 无法删除 SD 卡上的文件
- ionic2 - 减少 ionic 2 中的闪屏和白屏总时间
- django - 在外键下拉列表中显示其所有依赖模型的值的总和
- html - 没有边距的 div 中不包含的文本:0 自动
- python - 列表追加替换先前附加的值
- android - 如何将 LinearGradient 用于反应选项卡导航器选项卡
- syntax-error - 如何查看为什么某个文件列在 vivado 的“语法错误文件”中