Question

我正在尝试添加到很久以前制作的图像滑块上。我以前在我的大图像下只有四个缩略图。我现在想要四个以上。我希望隐藏多余的图像，直到我选择下一个箭头。我不确定如何显示多余的图像。我确定我必须立即设置最大限制，但我不知道在哪里添加它。我希望缩略图图像集旋转4。

我创建了一个小提琴https://jsfiddle.net/1gLgg7uq/

我加入了

//Thumb controls
$('.thumbcontrols li').click(function () {
    var
    //Slideshow
    sshow = $(this).closest('.slideshow'),
        //Increment
        incr = $(this).hasClass('prev') ? -1 : 1,
        //Current Index
        currentIndx = sshow.find('.big li').index(sshow.find('.big li:visible')),
        //Final Index
        finalIndx = currentIndx + incr;

    //Check ranges
    finalIndx = (finalIndx >= 4) ? 0 : ((finalIndx < 0) ? 3 : finalIndx);

    //Now trigger click event on respective image in nav
    sshow.find('.thumb li:eq(' + finalIndx + ')').trigger('click');
});
$('#bxslider-horizontal .bxslider').bxSlider({
    mode: 'horizontal',
    infiniteLoop: false,
    pager: false,
    slideWidth: 200,
    maxSlides: 4,
    minSlides: 2,
    slideMargin: 10
});

我试图修改很久以前发现的代码，而且我对Java Script的经验很少。我理解show和hide的基础知识，但我不知道如何将它应用到我想要做的事情上。我确定我需要某种最小/最大设置，但不确定如何配置。

是否有人建议我需要修改哪些内容才能使其正常工作，或者我是否应该抓取上面发布的代码并尝试以不同的方式执行此操作？

Answer 1

https://jsfiddle.net/7vxjpeyj/

我在项目列表中做了一个flex，我也改变了这个html的一部分。

 <ul class='thumb' id="bxslider-horizontal">
     <li>
        <img src="http://lorempixel.com/400/400/sports/1/" />
     </li>
     ....


#bxslider-horizontal{
    display: flex;       
    width: 530px;

    list-style-type:none;
    margin:0;
    padding:0;
 }
 #bxslider-horizontal li{
    flex: 1; 
 }


#bxslider-horizontal li img{
    width:100%
}

注意 flex是fiddler中的前缀。

javascript需要知道具有可变数量的元素。我没有触摸你的代码只更新号码

numImages = sshow.find('.thumb li').length;
finalIndx = (finalIndx >= numImages) ? 0 : ( (finalIndx < 0) ? (numImages-1) : finalIndx);

使图像滑块在视图中具有最大数量的图像并隐藏其余部分

1 个答案: