web-dev-qa-db-ja.com

Bootstrap 3つのカルーセルコントロールとインジケーターリンクが機能しない

Bootstrap 3つのカルーセルコントロール（およびインジケーター）リンクがページで機能しないのはなぜですか。ドキュメントからの単純なコピーアンドペーストとCSSのカスタマイズの一部でした。コードは次のようになります。ここで見られる http://bevog.si.bitcloud.nine.ch/ （#gallery）。

更新：

カルーセル初期化コード

/* GALLERY */
$('#gallery-carousel').carousel()

カルーセルマークアップ

<div id="gallery-carousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#bevog-image-1" data-slide-to="0" class="active"></li>
    <li data-target="#bevog-image-2" data-slide-to="1"></li>
    <li data-target="#bevog-image-3" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active" id="bevog-image-1">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
    <div class="item" id="bevog-image-2">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
    <div class="item" id="bevog-image-3">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
  </div>

  <a class="left carousel-control" data-slide="prev" href="#"><span class="icon-prev"></span></a>
  <a class="right carousel-control" data-slide="next" href="#"><span class="icon-next"></span></a>
</div>
jquerycarouseltwitter-bootstrap-3
8
Primoz Rome

カルーセルリンクのアンカータグには、カルーセルのIDを指すhrefが必要です。 Bootstrapドキュメントを参照

<a class="left carousel-control" data-slide="prev" href="#gallery-carousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#gallery-carousel"><span class="icon-next"></span></a>
19
DigTheDoug

インジケーターについても同様の問題が発生しています（機能していません）。インジケーターの場合、これをJSに追加できます...これにより、インジケーターに同じ機能が手動で設定されます。

$('.carousel-indicators li').click(function(e){
        e.stopPropagation();
        var goTo = $(this).data('slide-to');
        $('.carousel-inner .item').each(function(index){
            if($(this).data('id') == goTo){
                goTo = index;
                return false;
            }
        });

        $('#gallery-carousel').carousel(goTo); 
    });
8
Chirag Mishra
$('.carousel-control').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide');
    if(goTo=="prev") {
        $('#carousel-id').carousel('prev'); 
    } else {
        $('#carousel-id').carousel('next'); 
    }
});
3
Sólon

コピー＆ペーストの危険。

コントロールを機能させるのに数時間を無駄にした後、私のコードのナビゲーションバーに同じIDの別のカルーセルがあることを発見しました#myCarousel

誰かが同じ問題に直面した場合に備えて。

2
bhaskarc

カルーセルの左右のコントロールで、各href属性をデータターゲットに置き換えます。

1
Dejazmach

カルーセルが読み込まれないという同じ問題が発生していました。 bootstrapの縮小版の読み込みから完全版の読み込みに切り替えたところ、機能しました。ミニには正しくないものがあると思います。

0
Dawn