Twitter Bootstrap Carousel：在 Carousel Div 外有 carousel-indicators

Question

是否可以在 Carousel Div 之外設置 carousel-indicators 列表？ 在底部，我問是否可以在整個頁面中搜索特定元素，並使用與它們相關聯的類。

我在想象這樣的事情：

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

是否有可能？

補充一下，我查看了 bootstrap JS 源代碼，發現了這一行：

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

它只是填充列表指標。 我想這個參考是針對演示文稿 div 元素的。

JAVASCRIPT 問題

是否可以通過刪除this引用來搜索整個頁面的元素？

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

任何建議將不勝感激。 謝謝！

Answer 1

聚會有點晚了，但您可以嘗試添加這樣的腳本...

$('#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 2

我已經編寫了一些通用代碼，因此我們可以在頁面的任何位置放置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');
        });
    });
});

Answer 3

我將簡單地使用slide事件：

$('.carousel').on('slide.bs.carousel', function (e) {
  var indicator = $('[data-target="#'+this.id+'"]');
  var index = $(e.relatedTarget).index();
  indicator.removeClass('active');
  indicator.filter('[data-slide-to="'+ index +'"]').addClass('active');
})

Answer 4

作為此問題的解決方法，您可以通過為每個幻燈片和每個指標分配一個 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 5

這適用於左/右按鈕單擊和自動滾動輪播。

$(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 6

我發現使用 bootstrap 中的 carousel() 函數效果最好，因為您指定哪個 DIV 應該是輪播。 輪播類需要有相對位置，但我希望我的指標在頁面的最底部有絕對定位，而不僅僅是輪播的底部。

我像這樣設置 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
});

我根本沒有觸及引導文件。 "slide" 類對於分配給您想要作為輪播的任何 DIV 以便它執行動畫很重要。