On click auto slide stops

[wabamonsta]

Hi ,

I have bxslider running perfectly

However when a user clicks the left or right arrow it automatically stop scrolling.

Even when user dont have the slider in focus

[benschaaf]

I am having this issue as well.

This is the code I am using tho:

    <script type="text/javascript">
      $(document).ready(function(){
        var slider = $('.slider').bxSlider({
        displaySlideQty: 3,
        moveSlideQty: 1,
        auto: true,
        controls: false
      });
    $('body').keyup(function (event) {
      // handle cursor keys
      if (event.keyCode == 37) {
        console.log('left');
        slider.goToPreviousSlide();        
        // event.preventDefault();
      } else if (event.keyCode == 39) {
        console.log('right');
        slider.goToNextSlide();
        // event.preventDefault();
      }
    });
  });
    </script>

I am trying to set the right and left arrow keyup to act as the pager, and then ditching the normal pager. But, once I hit the left or right key, it changes the slide but never starts the auto play again. :(

What should I do?

[envex]

Did you try starting the slideshow again after each click?

slider.startShow()

[benschaaf]

So, are you saying...

slider.goToNextSlide();

should be:

 slider.startShow();

?

Thanks!

[envex]

Give it a shot. You won't know until you try.

[benschaaf]

Appears to be working now. Thanks for the tip.

[josephbuarao]

Hi Guys,

Can you help me to fix this issue. I was trying to integrate the arrow controls(left & right) to BxSlider when I pressed the next key(right arrow) the last slider image show up which not suppose to show up instead the next slider image then same thing with the previous key(left arrow) when I pressed it the first image show up.

Here's the code I'm working with

jQuery('.bxslider').bxSlider({ pagerCustom: '#bx-pager', nextSelector: '#slider-next', prevSelector: '#slider-prev', nextText: '', prevText: '', onSliderLoad: function(){ jQuery('#listing-slider').show();} });

jQuery('body').keyup(function(e){

    var slider = jQuery('.bxslider').bxSlider();
    if (e.keyCode == 37) { 
        slider.goToPreviousSlide();
        return false;
    }

    if(e.keyCode == 39){
        slider.startShow();
        return false;
    }
});

[hectorguedea]

SOLUTION, very easy, for me this working very well:

var slider = $('.example').bxSlider({ auto: true, autoStart:true, infiniteLoop: true });

$(".bx-wrapper a").click(function(){ slider.startAuto(); });

[sammygf]

It works for me

Javascript:

        $(".bxSlider").bxSlider({
            auto: true,
            autoControls: true,
            onSlideAfter: function() {
                $('.bx-start').trigger('click');
            }
        });

CSS:

.bx-start { display: none; }

[jonathonmills]

Brilliant Sammy, been looking for a solution to this for days, definitely works. Noticed that autoControls has to be enabled as well for it to kick in.

[dwlxjz]

thanks,sammygf , correct answer

[mayurshirishmohite]

Thanks Sammmy very much awesome trick

[dubbsdubblin]

For anyone looking to get this implemented - here is a confirmed working fix for v 4.1.1. > http://mcpmbstu.wordpress.com/2013/11/12/bxslider-auto-start-after-click-nextprevious/

[IsacCosta]

open the file - jquery.bxslider.min.js

find the function and comment on internal controls

r.stopAuto = function (t) {

//o.interval && (clearInterval (o.interval), o.interval = null && o.settings.autoControls // 1! // && t = A //("start"))   },

[ghost]

I have use of bxslider and i have two problem.

1. how to stop slider if mouse on a link or content of slider ?
2. how to move slider one by one, i have maxSlider in 7 nd slider move 7 by 7, and while maxslider is 1 slider move 1 by 1.

[gbowencoursera]

I have tried everything in this thread - but I am still seeing a problem. If the slider is set to auto, and you click on the left arrow on the first slide, the slider freezes up? The arrows no longer work and auto stops as well?