如何在滑块中重复滚动图像答案

【问题标题】：How to repeat scroll image in a slider如何在滑块中重复滚动图像
【发布时间】：2015-03-27 05:46:16
【问题描述】：

我的问题是如何无限滚动拇指图像？我的意思是当我点击右点图像（>）时应该向左滚动并从第一张图像再次重复，并且与右指针相同。

我已经成功滚动图像，但滚动结束图像不滚动。我想无限滚动（意味着应该再次重复）。

请帮忙。

提前致谢。

function slider(action){

  if(action == 'next'){
     var leftPos = $('#bx-pager').scrollLeft();
    $("#bx-pager").animate({scrollLeft: leftPos - 50}, 500);
  } else {
    var leftPos = $('#bx-pager').scrollLeft();
    $("#bx-pager").animate({scrollLeft: leftPos + 50}, 500);
  }

}

.slideWrap{position: relative;height: 50px;width:300px;overflow:hidden}
.slideWrap span{background: rgba(0,0,0,.3);height: 100%;position: absolute;top:0px;right: 0;z-index: 1;}
.slideWrap span i{color: #fff;height:50px;padding: 15px 2px}
.slideWrap span i:hover{color: #f2822e}
span#moveNext {}
span#movePrev{left: 0;right: auto;}

#bx-pager ul {padding: 0;margin: 0;width: 400px;list-style:none}
#bx-pager ul li{float: left}
#bx-pager ul li a img{height: 50px;width: 50px;border:3px solid #333;margin:2.5%}

<script src="https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="slideWrap">
                                            <span id="moveNext"><a href="javascript:void(0);" onclick="slider('next')"><i class="glyphicon glyphicon-chevron-right"></i></a></span>
                                                <div id="bx-pager">
                                                    <ul>
                                                        <li><a data-slide-index="0" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="1" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="2" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="3" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="1" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="2" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="3" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="2" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                        <li><a data-slide-index="3" href=""><img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" /></a></li>
                                                    </ul>
                                                </div>
                                            <span id="movePrev" > <a  href="javascript:void(0);" onclick="slider('prev')"><i class="glyphicon glyphicon-chevron-left"></i></a></span>
                                            </div>

【问题讨论】：

如果您使用的是 bxslider，为什么不提供选项“default:true;”如页面bxslider.com/options#infiniteLoop中所述？
@sai 请检查此链接54.160.13.227/solar/19_Sale_View_B_details.html 然后您就知道实际问题了。
我希望你能得到我。
对不起，我不完全理解你。假设您的滑块中有 10 个拇指图像，您希望向右箭头从 1 到 10 进行进度，达到 10 后，应该显示拇指 1？
没关系，底部有多少图像，我只希望图像循环滚动（意味着不在特定点结束）。我说的是底部滑块，您可以在链接上看到或在 sn-p 中看到。

标签： javascript jquery html css scroll

【解决方案1】：

对此的基本方法是： 1. 在事件为“下一个”时：从 ul 中删除第一个孩子并将其添加到 ul 标记的末尾。 2.点击'previous'：从ul中移除最后一个child，并添加到ul的前面。

使用 .children 获取孩子，然后访问第 0 个或 chilren.length - 第 1 个孩子并与它一起玩

【讨论】：

【解决方案2】：

感谢大家的努力，但我得到了正确的答案。

function slider() {
    var item_width = $('#bx-pager ul li').width(); 
    var left_value = item_width * (-1); 


        var left_indent = parseInt($('#bx-pager ul').css('left')) - item_width;

        $('#bx-pager ul ').animate({'left' : left_indent}, 100, function () {
            $('#bx-pager ul li:last').after($('#bx-pager ul li:first'));                  
            $('#bx-pager ul').css({'left' : left_value});

        });
}

【讨论】：

【解决方案3】：

对我来说，问题在于 CSS3 过渡和添加 useCSS: false 强制 bxslider 使用 jQuery 而不是 CSS 进行过渡。

<script type="text/javascript">
  $(document).ready(function(){ 
     $('.bxslider').bxSlider({

         auto: true,
         autoControls: false,
         controls: false,
         pause: 4000,
         infiniteLoop: true,
         mode: 'horizontal',
         autoDirection: 'next',
         responsive: true,
         preloadImages: 'all',
         minSlides: 2,
         autoDelay: 0,
         randomStart: false,
         pager: false,
         moveSlideQty: 1,
         useCSS: false,
           });
         });
       </script>

【讨论】：

【解决方案4】：

我认为您应该为此任务使用插件，
希望这个插件能帮到你，http://sorgalla.com/jcarousel/

【讨论】：