Карусель с несколькими элементами в Bootstrap: методы и примеры кода

«Несколько элементов Bootstrap Carousel» — это функция платформы Bootstrap, которая позволяет отображать несколько элементов в компоненте карусели или слайд-шоу. Вот несколько методов, которые можно использовать для достижения этой цели, а также примеры кода:

Метод 1: использование системы сеток Bootstrap

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row">
        <div class="col-sm-4">
          <!-- Item 1 -->
        </div>
        <div class="col-sm-4">
          <!-- Item 2 -->
        </div>
        <div class="col-sm-4">
          <!-- Item 3 -->
        </div>
      </div>
    </div>
    <div class="item">
      <div class="row">
        <div class="col-sm-4">
          <!-- Item 4 -->
        </div>
        <div class="col-sm-4">
          <!-- Item 5 -->
        </div>
        <div class="col-sm-4">
          <!-- Item 6 -->
        </div>
      </div>
    </div>
  </div>
</div>

Метод 2: использование элементов управления каруселью Bootstrap

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!-- Item 1 -->
    </div>
    <div class="item">
      <!-- Item 2 -->
    </div>
    <div class="item">
      <!-- Item 3 -->
    </div>
  </div>
  <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>

Метод 3. Использование собственного CSS и JavaScript

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <!-- Item 1 -->
    </div>
    <div class="item">
      <!-- Item 2 -->
    </div>
    <div class="item">
      <!-- Item 3 -->
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    $('#myCarousel').carousel({
      interval: 5000
    });
    $('.carousel .item').each(function() {
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
      for (var i = 0; i < 2; i++) {
        next = next.next();
        if (!next.length) {
          next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
      }
    });
  });
</script>