裏紙に書く程度の内容

bootstrap carousel のインジケータをタブにする方法

bootstrapの carousel のカスタマイズ。

インジケータを設定すると丸いボタンが表示されますが、これをタブにしたい。

基本的な使い方

Carouselの基本的な使い方は下記サイトがわかりやすいかと。

http://designup.jp/bootstrap3-carousel-193/

やりたいこと

以下のhtmlを表示してみると、

    test1
    test2
    test3

インジケータの部分はシンプルな”○”で表示されます、これをbootstrapのtabで表示させたいってのが今回の目的です。

修正方法

インジケータのクラスをへんこうするだけ。

    test1
    test2
    test3

    TEST1
    TEST2
    TEST3

インジケータ部のcarousel-indicatorsnav nav-tabsに変更しています。

<li>には通常のタブの作り方と同じように、<a>タグを追加。 インジケータの設定に必要なdata-target,data-slide-toはこの<a>タグに設定します。

また、タブ動作に必要なdata-toglle="tab"も忘れずに。

注意点として、デフォルトでは<ol>でインジケータを作っていましたが、これを<ul>にしないとタブがうまく動作しません。

タブクリック以外での移動をする場合

上記ではcarouselの自動遷移や”Next”、”Prev”ボタンはないので不要ですが、”Next/Prev”ボタンがあるある場合はタブクリック以外でもパネル部が移動することにります。

この時、タブが置いてけぼりになるので、制御する必要があります。 この制御はjavascriptで行います。

  $('#carousel').on('slid.bs.carousel', function(e) {
    idx = $(this).find('.active').index();
    $('#example li.active').removeClass('active')
    $('#example li').eq(idx).addClass('active')
  });

Carouselの移動時、slid.bs.carouselイベントが発火します。 ここで、$(this).find('.active').index();で現在表示されているパネルのインデックスが取得できます。 このインデックスを使ってタブの方も.activeクラスを設定しています。

まとめ

bootstrapはあまり使ったことがなかったので、実現するためにjavascriptいじったりなんだりとごちゃごちゃやってたんですが、結局シンプルな方法でできることがわかりました。

マニュアルちゃんと読んだらすんなりできたのかもね!

あと、bootstrapのtabはパネルの部分と独立しているのが扱いやすいですね。

広告
Index