如何移动中心 <li> 如果我单击任何滑块，则在bxSlider中 <li> ？

Question

我已经创建了一个滑块，并且在项目中使用了bxSlider 。

现在我的要求是这样的：

如果我单击任何li ，则此li移动到带有动画的滑块中心。

你能帮助我吗？ 我曾尝试搜索Google，但找不到任何解决方案。

我的代码是这个

的HTML

<div class="mainDiv">

<ul class="masterSlider">
    <li><a href="#"><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/trees.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/trees.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/trees.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></a></li>
    <li><a href="#"><img src="http://bxslider.com/images/730_200/trees.jpg" /></a></li>

            </ul>

</div>

s

$(document).ready(function(){
    $('.masterSlider').bxSlider({
        mode: 'horizontal',
        captions: false,
        pager: false,
        minSlides: 5,
        maxSlides: 5,
        moveSlides: 1,
        slideWidth: 100,
        slideMargin: 10
    });

});

在这里摆弄

Answer 1

这个bxSlider插件有一个挑战，那就是它决定移动的方式与幻灯片编号没有多大关系。

您可以在这里看到修改过的小提琴

现在，在选项页面上，它为我们提供了getSlideCount()和goToSlide() 。 考虑到这一点，问题是如何确定当前要单击的幻灯片。 为此，我向所有li元素添加了data-slide属性。 然后在li的masterSlider元素上抛出一个侦听器。 单击li ，然后从data-slide属性获取幻灯片编号，并将其调整为减去2（导致居中）并防止出现负数。 最后，我用该值调用goToSlide 。

但是，该插件将检测克隆的副本是否位于可见屏幕的右侧（在某些情况下），并快速将您滚动至右侧，从而给您带来令人愉悦的体验，但是它确实以正确的幻灯片结尾在中心。

修改后的HTML：

<ul class="masterSlider">
    <li data-slide="0"><a href="#"><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></a></li>
    <li data-slide="1"><a href="#"><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></a></li>
    <li data-slide="2"><a href="#"><img src="http://bxslider.com/images/730_200/trees.jpg" /></a></li>
...
</ul>

修改后的JS：

var masterSlider;
$(document).ready(function(){
    masterSlider = $('.masterSlider').bxSlider({
        mode: 'horizontal',
        captions: false,
        pager: false,
        minSlides: 5,
        maxSlides: 5,
        moveSlides: 1,
        slideWidth: 100,
        slideMargin: 10
    });
    $('.masterSlider').on('click', 'li', gotoSlide);
});
function gotoSlide() {
    var idx = (parseInt($(this).data('slide')) + masterSlider.getSlideCount() - 2) % masterSlider.getSlideCount();
    masterSlider.goToSlide(idx);
}

Answer 2

好吧，如果我理解正确，当单击滑块的中心时，您希望随动画一起移动图像li 。 我从来没有真正使用过bxSlider，但是无论如何，如果它使用的是jquery，您可以只对单击到容器中心的图像进行动画处理。

$('.masterSlider').children().click(function(){
             var witdh =   $('.masterSlider').width;
             var imgwdth = $(this).width;
         $(this).animate({
               marginLeft: (width/2)-(imgwdth/2);
         }, 400);
});

让我知道这是否是您想要的，因为我没有测试它，所以它可能无法完美运行。