0

このリンクを見て、ギャラリー カルーセル コントロールのクリックでクラス .highlight を親指に追加する方法を教えてください。

コードからわかるように、次のコードを使用して、選択した親指を強調表示しています。

var classHighlight = 'highlight';
var $thumbs = $('.thumbnail').click(function(e) {
e.preventDefault();
$thumbs.removeClass(classHighlight);
$(this).addClass(classHighlight);
});

まあ、それが正しい方法かどうかはわかりませんが、私にとってはうまくいっています! しかし、私が言ったように、これは .thumbnail をクリックすると機能しますが、必要なのはスライドイベントのサムネイルにクラスを追加することです。この CSS を既にコードに追加していますが、機能していません!

.thumbnail:active{
  border-style:solid;
  border-width:5px;
  border-color:gery;
  }

お時間とコメントありがとうございます

4

1 に答える 1

1

オンスライド機能を変更してそれを行うことができます（下の2行を追加）：

   // When the carousel slides, auto update the text
    $('#myCarousel').on('slid', function (e) {
            var id = $('.item.active').data('slide-number');
            $('#carousel-text').html($('#slide-content-'+id).html());
        $('#slider-thumbs > div > ul > li > a').removeClass('highlight');
        $('#carousel-selector-'+id).addClass('highlight');
    });

ページ読み込み時に最初のサムネイルを選択するには、カルーセルの初期化後に次の行を一番上に追加します。

   $('#carousel-selector-0').addClass('highlight');

フィドル:デモ

于 2013-06-21T05:19:50.463 に答える