Bootstrap Carousel: Изменить раздел под слайдером

Итак, у меня есть типичная карусель Bootstrap с тремя или четырьмя слайдами, и проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы раздел под ползунком изменялся всякий раз, когда наступает новый слайд вверх. Я попытался возможно скрыть этот раздел и выявление надлежащего раздела с помощью «коллапс», как это: Hide div by default and show it on click with bootstrap Bootstrap Carousel: Изменить раздел под слайдером

<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» и т.д ... Проблема что это, похоже, не работает правильно для нескольких слайдов.

В идеале я хотел бы, чтобы дно исчезло, а затем исчезло с идентификатором div, соответствующим id для слайда.

Возможно ли это?

источник

2016-05-17 mystic cola

Этот простой код показывает и скрывает текст под карусели Bootstrap, в зависимости от активного слайда.

Вы можете установить складные div по классам for-slide-. В моем примере слайд 4 не имеет складных div. Слайды 1 и 3 используют тот же 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>

источник

2016-05-17 13:21:55

Выглядит здорово. Но где разместить первый раздел кода? В bootstrap.js? Или прямо в index.html? –

@mysticcola Первая часть кода корабля - это javascript. Оберните его в теги '

Смежные вопросы