Question

所以我有你的典型Bootstrap Carousel，带有三个或四个幻灯片，而我遇到的问题是我希望每当新幻灯片出现时滑块下的部分都会改变。我尝试过隐藏该部分并使用“崩溃”显示正确的部分，如下所示：Hide div by default and show it on click with bootstrap

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>

<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>

...下一张幻灯片将是“foo2”，然后是“foo3”等...问题是，这似乎不适用于多张幻灯片。

理想情况下，我希望底部淡出，然后使用与幻灯片的id对应的div ID淡入。

这可能吗？

Answer 1

这个简单的代码显示和隐藏Bootstrap Carousel下的文本，具体取决于活动幻灯片。

您可以按类"document_start"设置可折叠的div。在我的示例中，幻灯片4没有可折叠的for-slide-。幻灯片1和3使用相同的div。

请检查结果。

div

$( document ).ready(function() {
  $('#myCarousel').on('slide.bs.carousel', function (e) {
    var forSlide = $('.for-slide-' + $(e.relatedTarget).index());
    if ( !forSlide.hasClass('in') ) {
      $('#collapseGroup>.collapse.in').collapse('hide');
      forSlide.collapse('show');
    }
  })
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img {
  width: 100%;
}

.container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.well {
  margin: 20px 0 0;
}

Bootstrap Carousel：更改滑块下的部分

1 个答案: