1

Есть стандартная бутстраповская карусель. Тут, к примеру, два слайда и статическая часть:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <!-- Слайдер карусели -->
    <div class="carousel-inner" role="listbox">
        <!-- Первый слайд -->
        <div class="item first_slide active">
            <div class="container">
                <div class="carousel-info">
                    <h1>FIRST SLIDE</h1>
                </div>
            </div>
        </div>
        <!-- Второй слайд -->
        <div class="item second_slide">
            <div class="container">
                <div class="carousel-info">
                    <h1>SECOND SLIDE</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- Статическая часть -->
    <div class="static_part">
        <h1>STATIC PART</h1>
    </div>
</div>

Подскажите, как при смене слайда менять цвет статической части? Если на экране первый слайд, статическая часть белого цвета, если второй слайд, статическая часть черная.

1 ответ 1

1

Можно добавлять и убирать классы или менять значения CSS-свойств по событиям карусели. Например, так:

$( document ).ready(function() {
  var selectStaticPart = $('#myCarousel > .static_part');

  $('#myCarousel').on('slide.bs.carousel', function (e) {
    if ( $(e.relatedTarget).index() == 0 ) {
      selectStaticPart.removeClass( 'static_part_black' ).addClass( 'static_part_white' );
    } else {
      selectStaticPart.removeClass( 'static_part_white' ).addClass( 'static_part_black' );
    }
  })
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.carousel {
  background: #ccc;
}
.carousel-indicators {
  bottom: 40px;
}

.static_part {
  text-align: center;
  -webkit-transition: all 0.6s ease-in-out;
       -o-transition: all 0.6s ease-in-out;
          transition: all 0.6s ease-in-out;
}
.static_part_black {
  background: black;
  color: white;
}
.static_part_white {
  background: white;
  color: black;
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <!-- Слайдер карусели -->
    <div class="carousel-inner" role="listbox">
        <!-- Первый слайд -->
        <div class="item first_slide active">
            <div class="container">
                <div class="carousel-info">
                    <h1>First slide</h1>
                </div>
            </div>
        </div>
       <!-- Второй слайд -->
       <div class="item second_slide">
            <div class="container">
                <div class="carousel-info">
                    <h1>Second slide</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- Статическая часть -->
    <div class="static_part static_part_white">
       <h1>Static part</h1>
    </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.7/js/bootstrap.min.js"></script>

2
  • Спасибо за такой развернутый ответ. Все работает отлично. Я тут немного экспериментирую, и хочу реализовать данную логик без jQuery на AngularJS. У вас был подобный опыт?
    – Artem
    15 авг 2016 в 22:43
  • @Artem Нет, такого не делал. На английском СО объясняют, как добавлять классы на ангуляре. Но бустраповская карусель подразумевает, что джиквери уже подключён. 16 авг 2016 в 2:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.