bx滑块 - 播放/暂停页面上的所有滑块

bxSlider - Play/Pause all sliders on page

本文关键字：滑块 播放 暂停 bx      更新时间：2023-09-26

我在页面上有两个滑块。使用相同的时间和设置集调用。一个滑块是图像滑块，另一个是它的标题。两者都在 html 的截然不同的区域中。

bxslider 正在为每个幻灯片创建播放/暂停，但我想要某种方式来拥有一个按钮来暂停当前页面上的所有幻灯片。 这是因为幻灯片是相对的，必须保持：

滑块 A - 幻灯片 1

/滑块 B - 幻灯片 1
滑块 A - 幻灯片 2/滑块 B - 幻灯片 2
滑块 A - 幻灯片 3/滑块 B - 幻灯片 3
等。

现在，当我暂停一个幻灯片放映时，另一个幻灯片放映继续，当按下播放时，它们不再同步。

.bxslider

和.bxslider-content都是我的bxslider类。

谢谢！

<script type="text/javascript">
    $(document).ready(function () {
           $('.bxslider, .bxslider-content').bxSlider({
                mode: 'fade',  
                auto: true,
                ease: 'cubic-bezier(0.42,0,0.58,1)',
                pager: false,
                controls: false,
                autoControlsCombine: true,
                autoControls: true,
                pause: 8000,
                speed: 800
           });
    });
    </script>

尝试

 var slider=$('.bxslider').bxSlider({
               //code here
           });
 var slider1=$('.bxslider-content').bxSlider({
               //code here
           });

 $(document).on('click','.pause',function(){         
        slider.stopAuto();
        slider1.stopAuto();
    });
   $(document).on('click','.play',function(){         
        slider.startAuto();
        slider1.startAuto();
    });

小提琴 http://jsfiddle.net/CDvmk/

相关文章：