Question

想要使用相同的寻呼机管理3滑块

我曾尝试过这段代码，但它没有工作

<script language="javascript">
$('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({
  //pagerCustom: '#bx-pager',
  pager:true,
  controls: false,
  touchEnabled : true,
    mode: 'fade',
    easing: 'swing',
  auto :true,
});
$('.mobile_left_mble,.mobile_right_mble').each(function(i){
        alert (i);
        slider_array[i] = $(this).bxSlider({pager:false});
    });
</script>

Answer 1

这是我要做的。首先，在我的JS文件中，我将初始化我的所有3个元素，在本例中为'mobile_left_mble，mobile_right_mble和text_btn'，并使用唯一的BxSlider调用。我会将每个调用存储在三个唯一变量中。

var mySlider1;
var mySlider2;
var mySlider3;

jQuery(document).ready(function($){
    mySlider1 = $('.mobile_left_mble').bxSlider({
       pager:false
    });

    mySlider2 = $('.mobile_right_mble').bxSlider({
       pager:false
    });

    mySlider3 = $('.text_btn').bxSlider({
       pager:false
    });
});

完成此操作后，您可以在HTML文件中创建自定义寻呼机。每个寻呼机项目，无论是'li，a href，div'（您决定），都需要有一个指示来确定要转到哪个幻灯片。您可以做的是为您的寻呼机项添加内联自定义属性。例如：data-slide =“x”，x是幻灯片索引（根据BxSlider文档，0是幻灯片1等）。

<ul class="one-pager-to-rule-them-all">
    <li><a class="pager-item" data-slide="0">1</a></li>
    <li><a class="pager-item" data-slide="1">2</a></li>
    <li><a class="pager-item" data-slide="2">3</a></li>
    <li><a class="pager-item" data-slide="3">4</a></li>
</ul>

回到你的JS文件，我会为我的pager-items创建一个OnClick事件。 BxSlider是一个很棒的插件，它提供了各种有用的回调，方法和事件，您可以利用它们。这样，通过单击一个pager元素，您将能够使用jquery检索幻灯片索引值并调用BxSlider自己的'goToSlide（x）'方法。您需要在我们存储滑块初始化的每个先前声明的变量上调用该方法。花点时间阅读bxSlider documentation。

var toSlide = $(this).attr('data-slide');
mySlider1.goToSlide(toSlide);
mySlider2.goToSlide(toSlide);
mySlider3.goToSlide(toSlide);

通过这样做，所有滑块都将由同一个寻呼机控制。

查看我的jsfiddle

这是你想要的吗？

带有单个寻呼机的多个bx滑块可以在javascript中管理所有内容

1 个答案: