bxSlider Issues


#1

Hi Everyone!

I hope someone can help me with this :slight_smile:

I’m using the bxSlider, however I’m facing some problems. I’m using the script with the thumbnails (method 1), and the auto play options turned on, however the class “pager-active” is not added when the slide changes.

Is there any way to do this?

In addition, is there any way to make the slider continue playing after an action has been made (ie. I click on a thumbnail)?

Here is the code I’m using:

// Run the Slider when the page is loaded
$(document).ready(function(){

	$(function(){
	  // assign the slider to a variable
	  var slider = $('#slider1').bxSlider({
	  	mode: 'fade',
	    pause: 5000,
	    controls: false,
	    auto: true,
	    autoControls: false,
	  });
	
	  // assign a click event to the external thumbnails
	  $('.thumbs a').click(function(){
	   var thumbIndex = $('.thumbs a').index(this);
	    // call the "goToSlide" public function
	    slider.goToSlide(thumbIndex);
	 
	    // remove all active classes
	    $('.thumbs a').removeClass('pager-active');
	    // assisgn "pager-active" to clicked thumb
	    $(this).addClass('pager-active');
	    // very important! you must kill the links default behavior
	    return false;
	  });
	
	  // assign "pager-active" class to the first thumb
	  $('.thumbs a:first').addClass('pager-active');
	});
	
});

Thank you :slight_smile:


#2

It seems that orman’s theme has the same problem (thumbs doesn’t work with the auto show option) :stuck_out_tongue:

http://themes.premiumpixels.com/repro/

Anyone knows how to solve this? :slight_smile:


#3

Though i understand this is 4 months old thread, Hopefully this solution will work.

Use this in the slider parameters/configuration.

onBeforeSlide: function(currentSlide, totalSlides){
    $('.thumbs a').removeClass('pager-active');
    $('.thumbs a').eq(currentSlide).addClass('pager-active');
}