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

Question

是否可以在 Carousel 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')

它只是填充列表指示器。我想 this 引用是针对 presentation 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
});

我根本没有接触引导文件。 “幻灯片”类对于分配给您想要成为轮播的任何 DIV 非常重要，以便它执行动画。