Question

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

现在我的要求是：

如果我点击此li以内的任何li移动到带有动画的滑块居中。

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

我的代码就是这个

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

Answer 1

这个bxSlider插件存在一些挑战，因为它决定移动的方式与幻灯片数量相比没有多大意义。

您可以看到modified fiddle here

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

但是，该插件会检测克隆的副本是否位于可见屏幕的右侧（在某些情况下）并且相当快速地向右滚动，给出了不那么令人愉快的体验，但它确实以正确的幻灯片在中心。

修改HTML：

goToSlide

修改JS：

<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>

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

让我知道如果这是你正在寻找的，它可能不会完美，因为我没有测试它。

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

2 个答案: