Twitter Bootstrap傳送帶：傳送帶外部有旋轉木馬指示符轉盤Div

傳送帶部門之外可以有傳送帶指示器列表嗎？在底部，我問是否有可能在整個頁面上搜索與他們綁定的類的特定元素。Twitter Bootstrap傳送帶：傳送帶外部有旋轉木馬指示符轉盤Div

我想象這樣的事情：

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

任何意見，將不勝感激。謝謝！

來源

2013-03-10 AnimaSola

一旦找到了'.carousel-indicators'，你想要做什麼？ – darshanags 2013-03-10 03:10:16

只是Bootstrap輪播指示器的默認行爲。每個圖像的參考。現在它可以正常工作，如果.carousel指標在同一個div中。我問是否能在外面正常工作。 – AnimaSola 2013-03-10 05:27:52

作爲解決此問題的一種解決方法，您可以通過爲每張幻燈片和每個指示符分配一個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-12 13:58:36 user2161277

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

$(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-22 04:33:59 Vorathe

我發現使用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 
});

我d ID根本不觸及引導文件。「幻燈片」類對於分配給您想要作爲輪播的DIV非常重要，以便它可以進行動畫製作。

來源

2014-02-10 17:51:52 Mary

晚了點派對，但你可以嘗試添加一個這樣的腳本...

$('#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-22 17:04:02 10chars

我已經寫了一些通用的代碼，所以我們可以把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'); 
     }); 
    }); 
});

來源

2017-07-11 16:12:07

Twitter Bootstrap傳送帶：傳送帶外部有旋轉木馬指示符轉盤Div

回答

相關問題