7

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

它只是填充列表指标。我想这个引用是针对演示 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 回答
6

I've written some universal code, so we can put carousel-indicators in any place of the page.

$(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-11T16:12:07.020 回答
2

我将简单地参加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');
})
于 2020-03-08T07:58:06.917 回答
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 回答
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

我发现使用 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 以便它执行动画非常重要。

于 2014-02-10T17:51:52.633 回答