Using jQuery data to detect active slide function and run

Question

Hi I am using jQuery to create custom navigation, but I cannot determine how to detect the active slide and apply the active state to the button for this slide.

I am setting up jsfiddle to better show what I'm trying to do, basically the same function as the dots / pager in the slider, but on buttons 1 2 and 3.

Im new to jQuery .data part: P

http://jsfiddle.net/unknown601/yxErC/17/

<div class="number" id="" data-slider="0"> Button 1 </div> <div class="number" id="" data-slider="1"> Button 2 </div> <div class="number" id="" data-slider="2"> Button 3 </div> <ul class="slider"> <li data-current="1"> <img src="http://placehold.it/350x150"> <p>Slider-1</p> </li> <li data-current="2"> <img src="http://placehold.it/350x150"> <p>Slide 2</p> </li> <li data-current="3"> <img src="http://placehold.it/350x150"> <p> Slide 3</p> </li> </ul> #current { color: red; font-weight: bold; } .number:hover { color: blue; cursor: pointer; } 

You have buttons to control the slider :)

 var Slider; $(document).ready(function() { Slider = $('.slider').bxSlider({ pager: true }); $('.number').on('click', function(e) { e.preventDefault(); var index = $(this).attr('data-slider'); Slider.goToSlide(index); }); }); 

Answer 1

Working violin .

You can add a class to the pressed button and remove it from another button inside the click event:

 $('.number').on('click', function(e) { e.preventDefault(); var index = $(this).attr('data-slider'); $('.number').removeClass('active'); //Remove class active from all buttons $(this).addClass('active'); //Add active class to the clicked one Slider.goToSlide(index); }); 

Since you are trying to activate buttons related to the slide, you can use the onSlideBefore() to add/remove active class for data-slider based buttons:

 Slider = $('.slider').bxSlider({ pager: true, onSlideBefore: function($slideElement, oldIndex, newIndex) { $('.number').removeClass('active'); $('.number[data-slider="'+newIndex+'"]').addClass('active'); } }); 

It helps.

Answer 2

Try:

 var Slider; var minState = 0; var maxState = 2; var currState = 0; $(document).ready(function() { Slider = $('.slider').bxSlider({ pager: true }); var changeActiveLink = function() { $('.active').removeClass('active'); $('.number[data-slider='+currState+']').addClass('active'); } $('.number').on('click', function(e) { e.preventDefault(); var index = $(this).attr('data-slider'); Slider.goToSlide(index); currState = index; changeActiveLink(); }); $('.bx-pager-link').on('click', function(e){ e.preventDefault(); var activeButton = $(this).data('slide-index'); currState = activeButton; changeActiveLink(); }); $('.bx-next').on('click', function(e){ e.preventDefault(); if(currState == maxState) { currState = 0; } else { currState++; } changeActiveLink(); }); $('.bx-prev').on('click', function(e){ e.preventDefault(); if(currState == 0) { currState = maxState; } else { currState--; } changeActiveLink(); }) }); 

http://jsfiddle.net/yxErC/32/

Answer 3

Do you want to create a custom "Previous / Next Page" button? If so, you can get the current ("active") page by calling getCurrentSlide() . See the documentation at http://bxslider.com/option for more details. And if you just want to make navigation control outside the slide, there is an example on the bxslider page: http://bxslider.com/examples/custom-next-prev-selectors