javascript - 带有单个寻呼机的多个bx滑块可在javascript中全部管理

想要使用同一寻呼机管理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>

最佳答案

这就是我要做的。首先，在我的JS文件中，我将使用唯一的BxSlider调用初始化我的所有3个元素，在这种情况下为“ mobile_left_mble，mobile_right_mble和text_btn”。我会将每个调用存储在三个唯一变量中。

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，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文件，我将为我的寻呼机项目创建一个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

这就是你想要的吗？

关于javascript - 带有单个寻呼机的多个bx滑块可在javascript中全部管理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24695918/