flexFlexslider2滑块/缩略图控件导航模式限制显示缩略图的数量

Question

我刚刚实现了Flexslider2 Slider w/thumbnail controlNav Pattern。问题是，我有8张图片，我想滚动浏览。现在，缩略图显示主图像下方的所有8个缩略图。我想限制缩略图显示的最大数量为4，然后滚动缩略图当它到达图像5-8。

maxItems: 4，似乎对我不起作用。

这是我的JS:

<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails",
    maxItems: 4,
  });
});
</script>

这是我的HTML:

<div class="flexslider">
             <ul class="slides">
             <li data-thumb="/Images/Products/WoodenSign/PNG/1-AMORE.PNG">
                <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
             </li>
             <li data-thumb="/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png">
                <img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
             </li>
             <li data-thumb="/Images/Products/Bench/PNG/1-BenchFullShot.png">
                <img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
             </li>
             <li data-thumb="/Images/Products/Bench/PNG/2-CabinRight.png">
                <img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain"/>
             </li>
             <li data-thumb="/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png">
                <img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
             </li>
             <li data-thumb="/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png">
                <img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
             </li>
             <li data-thumb="/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png">
                <img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
             </li>
             <li data-thumb="/Images/Products/WoodenSign/PNG/3-LOVE.PNG">
                <img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
             </li>
           </ul>
        </div>

Answer 1

你必须在你的css文件中定义Flexslider的宽度比如在Flexslider。css

中将其设置为width: 400px

.flexslider {
    width: 400px;
}

，然后在你的jQuery初始化滑块中定义单个幻灯片的宽度，像这样:

$('.flexslider').flexslider({
    itemWidth: 100
});

这是为每个幻灯片定义的宽度为100px。通过这种设置，您应该可以显示4张幻灯片。