CODEWITHSUNDEEP
javascriptjquerybxslider
dasCode
dasCode

Reputation: 33

bxSlider - Play/Pause all sliders on page

I have two sliders on a page. Called with the same set of times and settings. One slider is a image slider, the other a sort of caption for it. Both in drastically different areas of the html.

bxslider is creating a play/pause for each slideshow, but I want some way of having one button that pauses all slideshows on the current page. This is because the slideshows are relative to each other and must keep a:

Slider A - Slide 1 / Slider B - Slide 1
Slider A - Slide 2 / Slider B - Slide 2
Slider A - Slide 3 / Slider B - Slide 3
etc.

Right now, when I pause one slideshow, the other continues and when the play is pressed, they are no longer in sync.

.bxslider & .bxslider-content are both my bxslider classes.

Thanks!

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

Upvotes: 1

Views: 5485

Answers (1)

Manish
Manish

Reputation: 1447

Try

 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/

Upvotes: 5

Related Questions