12

ブートストラップ用の既存のカルーセルにドットのようにページネーションを追加するにはどうすればよいでしょうか。

ドット間を自動的に移動する必要があります。

これには非常に新しいので、少し手を加える必要があります。

これが私のコードです：

http://jsfiddle.net/mdesignone/qXgCg/

ありがとう：）

4

3 に答える 3

10

この機能は現在、2.3 マイルストーン(現在は 2.1)に含まれる予定です。現在、この機能を既に実装しているプル リクエストがあります。この機能が正式に統合されると、最終的な API と一致する可能性が高くなるため、自分で作成するよりも使用することをお勧めします。

プラグインのソースは、Bootstrap プロジェクトの mikaelbr のフォークにあります。bootstrap-carousel.jsとcarousel.lessの両方が必要になります。

ここにデモがあります：

JSFiddle

于 2012-09-06T23:49:37.880 に答える
6

最新のカルーセルでは、 carousel-indicatorsクラスを使用できます。

 <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

http://getbootstrap.com/javascript/#carousel

于 2013-03-25T06:46:21.637 に答える
2

私のサイトでもこれを行う必要があったため、これはややハックな方法です。更新されたフィドル: http://jsfiddle.net/qXgCg/2/

//Javascript   
var slider = $(".carousel-inner") 
.carousel({ interval: 5000 }) 
.bind('slid', function() { 
var index = $(this).find(".active").index(); 
$(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active'); 
}); 

$(".slider-pager a").click(function(e){ 
  var index = $(this).index(); 
  slider.carousel(index); 
  e.preventDefault(); 
}); 

/* css */
.slider-pager        {    margin-top: 10px; }
.slider-pager a    {    display: block; height: 10px; width: 10px; float: left; margin-right: 10px; border-radius: 50%; background: #41af96; font-size: 1px; color: #fff; text-indent: -9999px; }
.slider-pager a.pager-active { background: #2c8571; }

<!--html --->
<div class="slider-pager">
<a href="#main-slider" class="pager-active">0</a>
<a href="#main-slider">1</a>
<a href="#main-slider">2</a>
</div>
于 2012-09-04T22:22:00.077 に答える