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

How to move center <li> in bxSlider if I click any slider <li>?

本文关键字：lt gt 如果 单击 任何滑 bxSlider 何移动 移动      更新时间：2023-09-26

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

现在我的要求是：

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

你能帮我吗？我试过在谷歌上搜索，但找不到任何解决方案。

我的代码是这个

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>

Js

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

Fiddle here

这个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);
}

好的，如果我理解正确，当图像li被点击到滑块的中心时，你想用动画移动它。我从来没有真正使用过bxSlider，但无论如何，如果它使用的是jquery，你可以直接将单击到容器中心的图像设置动画。

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

如果这是你想要的，请告诉我，它可能不完美，因为我没有测试它。

相关文章：