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张幻灯片。

Flexslider 2 Slider with / thumbnail controlNav pattern Limiting显示的缩略图数量

1 个答案: