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>

有可能吗？

添加，我检查了bootstrap JS源代码并找到了这一行：

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

它只填充列表指标。我想这个引用是针对表示div元素。

JAVASCRIPT QUESTION

是否可以通过删除此引用来搜索整个页面的元素？

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
});

我根本没有碰过bootstrap文件。 “幻灯片”类非常重要，可以分配给您想要成为旋转木马的任何DIV，以便它可以进行动画制作。

Twitter Bootstrap Carousel：在Carousel Div外面有旋转木马指示器

6 个答案: