7

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

私はこのようなものを想像しています：

<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>

出来ますか？

追加するだけで、ブートストラップJSソースをチェックアウトし、次の行を見つけました。

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

リストインジケーターにデータを入力するだけです。このリファレンスはプレゼンテーションのdiv要素用だと思います。

JavaScriptの質問

この参照を削除して、ページ全体で要素を検索することはできますか？

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

アドバイスをいただければ幸いです。ありがとう！

4

6 に答える 6

8

パーティーには少し遅れましたが、次のようなスクリプトを追加してみてください...

$('#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>
于 2014-02-22T17:04:02.947 に答える
0

どの DIV をカルーセルにするかを指定するため、bootstrap の carousel() 関数を使用するのが最も効果的であることがわかりました。カルーセル クラスには相対位置が必要ですが、カルーセルの一番下だけでなく、ページの一番下にインジケーターを絶対配置する必要がありました。

HTML コードを次のように設定しました。

<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-->

自分の JS ファイルで、次のコードを実行しました。

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

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

于 2014-02-10T17:51:52.633 に答える
0

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

$(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);
 };
于 2013-05-22T04:33:59.637 に答える
0

この問題の回避策として、各スライドと各インジケーターに 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() を呼び出します。この回避策は、自動スクロールを使用しないスライドに限定されます。

于 2013-03-12T13:58:36.773 に答える