There is a standard bootstrap carousel. Here, for example, two slides and a static part:

<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>

Tell me how to change the color of the static part when changing the slide? If the first slide is on the screen, the static part is white, if the second slide, the static part is black.

    1 answer 1

    You can add and remove classes or change CSS property values ​​for carousel events . For example:

     $( 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>

    • Thank you for such a detailed response. Everything works perfectly. I'm experimenting here a bit, and I want to implement this logic without jQuery on AngularJS. Did you have a similar experience? - Artem
    • @Artem No, I did not. In English, CO explains how to add classes on an angular . But the bustrap carousel implies that the jikvery is already connected. - Gleb Kemarsky