0

クラス .active をカスタム ブートストラップ ページネーションに追加したいと考えています。

現在、ページネーションをクリックしてナビゲートするとうまく機能しますが、矢印を使用すると、ページネーションの次の項目がアクティブになりません。

したがって、基本的には、.carousel 要素のどの子要素がアクティブであるかを確認し、アクティブなクラスをページネーションの同じ (たとえば 2 番目の) 子要素に追加したいと考えています。

$('.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');
});

コードは次のようになりますが、子要素を手動で入力しても機能しません。

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

助けてくれてありがとう！

4

1 に答える 1

1

試す：

// 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');
}

より完全な解決策は次のとおりです。

// 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');
})
于 2012-12-20T18:18:59.163 に答える