Twitter Bootstrapカルーセル：カルーセルディビジョンの外側にカルーセルインジケータがあります

Question

カルーセルディグリーリストをカルーセルディビジョンの外に置くことは可能ですか？一番下の部分では、ページ全体を検索して特定の要素をクラスに関連付けて検索できるかどうかを尋ねています。それが可能

<div id="presentation" class="tab-pane active"> 
    <div id="presentationCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"><img src="...1.jpg" alt="" /></div> 
      <div class="item active"><img src="...2.jpg" alt="" /></div> 
      <div class="item active"><img src="...3.jpg" alt="" /></div> 
     </div> 
     <a class="carousel-control left" href="#presentationCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#presentationCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

<div id="chapterList"> 
    <ol class="carousel-indicators"> 
     <li data-target="#presentationCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#presentationCarousel" data-slide-to="1"></li> 
     <li data-target="#presentationCarousel" data-slide-to="3"></li> 
    </ol> 
</div> 

です：

私はこのようなものを想像していますか？それはちょうどリスト指標を移入

this.$indicators = this.$element.find('.carousel-indicators') 

：

はちょうど私は、ブートストラップJSのソースをチェックアウトし、この行を見つけ、追加します。 このの参照は プレゼンテーションdiv要素です。

JAVASCRIPT QUESTION

それがこの参照を除去することにより、要素のためにページ全体を検索することは可能ですか？

this.$indicators = $element.find('.carousel-indicators') 

いずれかのアドバイスは高く評価されます。ありがとう！

Answer 1

この問題を回避するには、各スライドと各インジケータにIDを割り当てて、スライドからインジケータにclass = "active"（およびclass = ""）をコピーできます。

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-3").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
    }, 800); 
}; 

次に、左または右のボタンクリックでスクリプトnavFunction（）を呼び出します。この回避策は、自動スクロールを使用しないスライドに限られています。

Answer 2

これは、左/右ボタンのクリックと自動スクロールカルーセルの両方で機能します。

$(document).ready(function() {   
    $('#presentation').carousel({ 
     interval: 8000 
    }).bind('slide', function() { 
     navFunction(); 
    }).carousel('cycle'); 
}); 

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-2").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
     $("#ind-4").attr("class", $("#slide-4").attr("class")); 
     $("#ind-5").attr("class", $("#slide-5").attr("class")); 
    }, 800); 
}; 

Answer 3

私はあなたがカルーセルであるべきDIV指定するためのブートストラップからカルーセルを使用して（）関数は、最良を働いたことがわかりました。カルーセルクラスは相対的な位置を持つ必要がありますが、インジケータがカルーセルの底だけでなく、ページの一番下に絶対的な位置付けをしたかったのです。

私はセットアップ、このようなHTMLコード：

$('#gallery').carousel({ 
    interval: 2000, 
    pause: "hover", 
    wrap: true 
}); 

：私自身のJSファイルで

<div id="galleryCarousel" class="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/photos/IMG_1937_8_9_tonemapped-X3.jpg" alt="Dish"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio 

     </div><!--end caption--> 
    </div><!--end item--> 

    <div class="item"> 
     <img src="images/photos/IMG_1961_2_3_tonemapped-X2.jpg" alt="Dish" class="portrait"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit 

     </div><!--end caption--> 
    </div><!--end item--> 


    </div><!--end carousel-inner--> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#gallery" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#gallery" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 



</div> <!--END carousel--> 

<div class="col-xs-6 picName"> 
    other stuff 
    </div> 

    <div class="col-xs-6"> 
    other stuff 
    </div> 

     <ol class="carousel-indicators col-xs-12"> 
     <li data-target="#gallery" data-slide-to="0" class="active"><div><img src="images/photos/small/IMG_1937_8_9_tonemapped-X3.jpg" alt="Goldstone, California Facility Images"></div>Goldstone Antenna at...</li> 
     <li data-target="#gallery" data-slide-to="1"><div><img src="images/photos/small/IMG_1961_2_3_tonemapped-X2.jpg" alt="Image 2"></div>Image 2</li> 

     </ol> 
    </div><!--END gallery--> 

を、私は次のコードをしました

I d idはブートストラップファイルに全く触れません。 「スライド」クラスは、アニメーションを行うためにカルーセルにしたいDIVに割り当てることが重要です。

Answer 4

パーティーに遅れていますが、このようなスクリプトを追加しようとすると...

$('#myCarousel').on('slide.bs.carousel', function() {  

$holder = $("ol li.active"); 
$holder.next("li").addClass("active"); 
if($holder.is(':last-child')) 
{ 
$holder.removeClass("active"); 
$("ol li:first").addClass("active"); 
} 
$holder.removeClass("active"); 
}) 
</script> 

Answer 5

私はいくつかの普遍的なコードを書いたので、私たちは、ページの任意の場所にcarousel-indicatorsを置くことができます。

$(document).ready(function() { 
    $('div[data-ride="carousel"]').each(function() { 
     var $carousel = $(this); 
     var id = this.id; 
     var relatedIndicators = $('li[data-target="#'+id+'"]'); 
     $carousel.on('slid.bs.carousel', function (e) { 
      var index = $carousel.find('.carousel-inner .item').index($carousel.find('.carousel-inner .active')); 
      relatedIndicators.removeClass('active'); 
      relatedIndicators.filter('[data-slide-to="'+ index +'"]').addClass('active'); 
     }); 
    }); 
});