Bootstrap Carousel:更改滑块下的部分 [英] Bootstrap Carousel: Change section under slider

问题描述

因此，我有一个典型的Bootstrap Carousel，带有三或四个幻灯片，而我遇到的问题是，每当出现新的幻灯片时，我都希望更改滑块下的部分.我尝试过也许隐藏该部分并使用折叠"显示适当的部分，如下所示:

So I've got your typical Bootstrap Carousel, with three or four slides, and the problem that I'm having is that I want the section under the slider to change whenever a new slide comes up. I tried maybe hiding that section and revealing the proper section using "collapse" like this: 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"，等等...问题是，这似乎不适用于多张幻灯片.

...where the next slide would be "foo2", and then "foo3" etc... The problem there was that this didn't seem to work right for multiple slides.

理想情况下，我希望底部逐渐淡出，然后使用对应于幻灯片ID的div ID逐渐淡入.

Ideally I would want the bottom to fade out and then fade in with a div id corresponding to the id for the slide.

这可能吗?

推荐答案

此简单代码根据活动幻灯片在Bootstrap Carousel下显示和隐藏文本.

This simple code shows and hides the text under the Bootstrap Carousel, depending on the active slide.

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

You can setup collapsible divs by classes for-slide-. In my example slide 4 has no collapsible div. Slides 1 and 3 use the same 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;
}

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="img-responsive" src="http://placehold.it/1920x650&text=Slide%200" alt="Slide 0">
        <div class="carousel-caption">
          <h3>Caption 0</h3>
        </div>
      </div>
      <div class="item">
        <img class="img-responsive" src="http://placehold.it/1920x650&text=Slide%201" alt="Slide 1">
        <div class="carousel-caption">
          <h3>Caption 1</h3>
        </div>
      </div>
      <div class="item">
        <img class="img-responsive" src="http://placehold.it/1920x650&text=Slide%202" alt="Slide 2">
        <div class="carousel-caption">
          <h3>Caption 2</h3>
        </div>
      </div>
      <div class="item">
        <img class="img-responsive" src="http://placehold.it/1920x650&text=Slide%203" alt="Slide 3">
        <div class="carousel-caption">
          <h3>Caption 3</h3>
        </div>
      </div>
      <div class="item">
        <img class="img-responsive" src="http://placehold.it/1920x650&text=Slide%204" alt="Slide 4">
        <div class="carousel-caption">
          <h3>Caption 4</h3>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <div id="collapseGroup">
    <div class="collapse for-slide-0 in">
      <div class="well">
        <h3>Text for Slide 0</h3>
      </div>
    </div>
    <div class="collapse for-slide-1 for-slide-3">
      <div class="well">
        <h3>Text for Slides 1 and 3</h3>
      </div>
    </div>
    <div class="collapse for-slide-2">
      <div class="well">
        <h3>Text for Slide 2</h3>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

这篇关于Bootstrap Carousel:更改滑块下的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！