Как менять блока при смене слайда?

Использование Bootstrap для изменения блока при смене слайда может быть реализовано с помощью JavaScript и событий, предоставляемых Bootstrap Carousel.

Для начала, необходимо убедиться, что вы правильно настроили свою разметку и добавили все необходимые файлы Bootstrap и JavaScript. Вы должны иметь в своем HTML-документе следующую разметку:

<div id="myCarousel" class="carousel slide">
  <!-- Slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="slide1.jpg" alt="Slide 1">
      <div class="carousel-caption">
        <h3>Slide 1</h3>
        <p>Content for slide 1.</p>
      </div>
    </div>
    <div class="item">
      <img src="slide2.jpg" alt="Slide 2">
      <div class="carousel-caption">
        <h3>Slide 2</h3>
        <p>Content for slide 2.</p>
      </div>
    </div>
    <div class="item">
      <img src="slide3.jpg" alt="Slide 3">
      <div class="carousel-caption">
        <h3>Slide 3</h3>
        <p>Content for slide 3.</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Обратите внимание, что у каждого слайда есть класс "item", и у первого слайда также есть класс "active".

Теперь мы можем использовать JavaScript, чтобы изменять блок при смене слайда. Мы можем использовать событие "slide.bs.carousel", предоставляемое Bootstrap Carousel, для обнаружения смены слайда и выполнения необходимого кода. Вот пример кода, который изменяет содержимое блока с классом "myBlock" при смене слайда на "Slide 2":

$('#myCarousel').on('slide.bs.carousel', function (e) {
  var slideIndex = $(e.relatedTarget).index();

  if (slideIndex == 1) {
    $('.myBlock').html('New content for slide 2');
  } else {
    $('.myBlock').html('Default content');
  }
});

В этом примере мы используем метод ".index()", чтобы получить индекс текущего слайда, который изменился. Затем мы проверяем, является ли индекс слайда равным 1 (индексы начинаются с 0). Если это так, мы изменяем содержимое блока с классом "myBlock" на новое значение. В противном случае, мы возвращаем содержимое по умолчанию.

Вы можете использовать этот пример кода и модифицировать его для своих конкретных потребностей. Также, если вы хотите изменить содержимое блока при смене других слайдов, просто измените условие "slideIndex == 1" на индекс нужного вам слайда или добавьте дополнительное условие для дополнительных слайдов.

Это только один из возможных способов изменения блока при смене слайда с использованием Bootstrap. В зависимости от ваших потребностей, вы можете использовать различные подходы и функции Bootstrap Carousel для достижения желаемого результата.