Javascript 滑动传送带-使用3张幻灯片（autoPlay=true）会使滑块导航的行为与有5张幻灯片一样
我正在使用滑溜转盘，想显示3张照片。我有3张照片显示在底部滑动导航窗格中。如果我将slidesToShow设置为2，则一切正常，但当slidesToShow=3（等于幻灯片总数）时，幻灯片放映会在底部导航中显示2张空白幻灯片，即使它在顶部窗格的滑块中仅正确显示3张主幻灯片 我意识到如果我将autoplay=false设置为false，那么它将按预期工作，但我会显示我希望自动循环通过的前/中/后照片，以便客户在自动播放导航幻灯片时可以看到所有可能的选择 你有什么办法让它工作吗？我看到有人提到不应该这样做，但这似乎是一个有价值的用例。至少在我的场景中。我很感激Javascript 滑动传送带-使用3张幻灯片（autoPlay=true）会使滑块导航的行为与有5张幻灯片一样,javascript,html,css,carousel,slick.js,Javascript,Html,Css,Carousel,Slick.js,我正在使用滑溜转盘，想显示3张照片。我有3张照片显示在底部滑动导航窗格中。如果我将slidesToShow设置为2，则一切正常，但当slidesToShow=3（等于幻灯片总数）时，幻灯片放映会在底部导航中显示2张空白幻灯片，即使它在顶部窗格的滑块中仅正确显示3张主幻灯片 我意识到如果我将autoplay=false设置为false，那么它将按预期工作，但我会显示我希望自动循环通过的前/中/后照片，以便客户在自动播放导航幻灯片时可以看到所有可能的选择 你有什么办法让它工作吗？我看到有人提到不应该
$（'.slider for'）。光滑({
幻灯片滚动：1，
自动播放：对，
自动播放速度：4000，
箭头：是的，
是的，
asNavFor:'.slider nav'/*子导航栏*/
});
$（'.slider nav'）.slick（{/*导航显示缩略图*/
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:“.滑块用于”/*父滑块*/
点：错，
焦点选择：正确，
箭头：错，
无限：真的
});
.main{
字体系列：Arial；
宽度：500px；
显示：块；
保证金：0自动；
}
.说明{
背景：#fff；
颜色：黑色；
字体大小：20px；
利润率：10px；
填充：2%；
位置：相对位置；
文本对齐：居中；
}
.main h3{
背景：#fff；
颜色：黑色；
字体大小：20px；
线高：100px；
利润率：10px；
填充：2%；
位置：相对位置；
文本对齐：居中；
}
腐烂的带孔壁板
新侧线和防水板
缎面漆
$（'.slider for'）。光滑({
幻灯片滚动：1，
自动播放：对，
自动播放速度：4000，
箭头：是的，
是的，
asNavFor:'.slider nav'/*子导航栏*/
});
$（'.slider nav'）。光滑({
/*带缩略图的导航显示*/幻灯片显示：3，
幻灯片滚动：1，
asNavFor:“.滑块用于”/*父滑块*/
点：错，
焦点选择：正确，
箭头：错，
无限：真的
});
无标题
梅因先生{
字体系列：Arial；
宽度：500px；
显示：块；
保证金：0自动；
}
.说明{
背景：#fff；
颜色：黑色；
字体大小：20px；
利润率：10px；
填充：2%；
位置：相对位置；
文本对齐：居中；
}
.main h3{
背景：#fff；
颜色：黑色；
字体大小：20px；
线高：100px；
利润率：10px；
填充：2%；
位置：相对位置；
文本对齐：居中；
}
身体{
背景色：#dfdfdf；
}
腐烂的带孔壁板
新侧线和防水板
缎面漆
$（'.slider for'）。光滑({
幻灯片滚动：1，
自动播放：对，
自动播放速度：4000，
箭头：是的，
是的，
asNavFor:'.slider nav'/*子导航栏*/
});
$（'.slider nav'）.slick（{/*导航显示缩略图*/
幻灯片放映：2，
幻灯片滚动：1，
asNavFor:“.滑块用于”/*父滑块*/
点：错，
焦点选择：正确，
箭头：错，
无限：真的
});
你能在jsfiddle.net上创建一个fiddle吗？Aggreed with@ChandraShekhar你能在jsfiddle中共享这个片段吗？在.slider导航上删除infinite:true并尝试删除infinite:true对行为没有影响在jsfiddle上设置时，我将slick.min.js文件从我的1.8.1改为1.9，它开始按预期工作，所以它一定是在最新版本中修复的，我想我有，谢谢！
<!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>