javascript - bxSlider - 播放/暂停页面上的所有 slider

Question

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

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

slider A - 幻灯片 1/ slider B - 幻灯片 1
slider A - 幻灯片 2/ slider B - 幻灯片 2
slider A - 幻灯片 3/ slider 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>

Answer 1

尝试

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

    });

fiddle http://jsfiddle.net/CDvmk/