Question

I want to add class .active to my custom bootstrap pagination.

Currently it works good when I navigate by clicking the pagination, but if i use the arrows the next item in my pagination doesn’t get active.

So, basically I want to see which child-element of the .carousel element is active, and add the class active to the same (for example second) child element in my pagination.

$('.sb-links a').click(function(q){
  q.preventDefault();
  targetSlide = $(this).attr('data-to')-1;
  $('#myCarousel').carousel(targetSlide);
  $('a').removeClass('active');
  $(this).addClass('active').siblings().removeClass('active');
});

The code would look something like this, but its not even working if i type the child element manually.

if ( $('.carousel-inner div:nth-child(1)').hasClass('active') ) {
  $('.sb-links a:nth-child(1)').addClass('active');
};

Thanks in advance for help!

Answer 1

Try:

// calculate the index you want
var index = 1; 
// get the div at the calculated index
var nthDiv = $('.carousel-inner div').eq(index);

// check if div has class
if (nthDiv.hasClass('active')) {
    // add class to the hyperlink at the same index
    $('.sb-links a').eq(index).addClass('active');
}

Here is a more complete solution:

// attach an event which is triggered when transition is complete
$('#myCarousel').on('slid', function (e) {
    // get the index of the current frame
    var index = $('.carousel-inner div').index('.active');
    // get all the slider buttons
    var buttons = $('.sb-links a');
    // remove the 'active' class on all slider buttons
    buttons.removeClass('active');
    // add the 'active' class on the button corresponding to the current frame
    buttons.eq(index).addClass('active');
})