Бутстрап (4 и 5) карусели из нескольких элементов (bootstrap carousel multiple items)

Стандартная Bootstrap карусель показывает только один слайд за раз. Но в реальных проектах часто нужно отображать несколько элементов одновременно (multiple items) — товары в интернет-магазине, портфолио работ, карточки команды, отзывы клиентов.

В этой статье я покажу 4 рабочих решения (2 с jQuery и 2 на Vanila JS):

• Равномерная карусель. 3-4 элемента одинакового размера в ряд. Идеально для каталогов товаров.
• Центральная карусель. Центральный слайд выделен, по краям половинки соседних. Эффект глубины.
• Версии для обеих версий фреймворка с учётом всех изменений.
• Автоматическая подстройка под любые экраны от мобильных до desktop.

Что выбрать: Bootstrap 4 или 5?

Используйте Бустрап 4 если:

• У вас уже есть проект на Bootstrap 4.
• Нужна поддержка старых браузеров (IE11).
• В проекте уже используется jQuery для других задач.

Используйте Бустрап 5 если:

• Создаёте новый проект с нуля.
• Хотите избавиться от jQuery (легче на 85 KB!).
• Важна современность и производительность.
• Целевая аудитория — современные браузеры.

Ключевые отличия решений на Bootstrap 4 vs 5

Демонстрации (4 варианта)

Прежде чем погрузиться в код, посмотрите все 4 варианта в действии:

1. Demo 1 (v.4): равномерная карусель;
2. Demo 2 (v.4): центральная карусель;
3. Demo 1 (v.5): равномерная карусель;
4. Demo 2 (v.5): центральная карусель.

Равномерная карусель (BS4)

Этот способ показывает 3-4 элемента одновременно, равномерно распределённых по ширине. Количество зависит от размера экрана.

Подключение Bootstrap 4

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- jQuery (обязательно!) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

HTML разметка

<div id="multiCarousel" class="carousel slide w-100" data-ride="carousel">
  <div class="carousel-inner w-100" role="listbox">
    
    <!-- Слайд 1 (активный) -->
    <div class="carousel-item active">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <img class="d-block w-100" src="image1.jpg" alt="Слайд 1">
      </div>
    </div>

    <!-- Слайд 2 -->
    <div class="carousel-item">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <img class="d-block w-100" src="image2.jpg" alt="Слайд 2">
      </div>
    </div>

    <!-- Добавьте столько слайдов сколько нужно -->
    <div class="carousel-item">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <img class="d-block w-100" src="image3.jpg" alt="Слайд 3">
      </div>
    </div>

  </div>

  <!-- Кнопки управления -->
  <a class="carousel-control-prev" href="#multiCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="carousel-control-next" href="#multiCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>

Объяснение классов:

• col-12 — на мобильных (< 576px) показываем 1 элемент
• col-md-6 — на планшетах (≥ 768px) показываем 2 элемента
• col-lg-4 — на десктопе (≥ 992px) показываем 3 элемента
• col-xl-3 — на больших экранах (≥ 1200px) показываем 4 элемента

CSS стили

/* Адаптивные изображения */
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Активный слайд и соседние показываем в ряд */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* Анимация: следующий слайд справа (для 4 элементов = 25%) */
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

/* Анимация: предыдущий слайд слева */
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

/* Сброс трансформации */
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

/* Для 3 элементов (992-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.33%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.33%);
  }
}

/* Для 2 элементов (768-991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }
}

JavaScript (jQuery)

$(document).ready(function() {
  // Инициализация карусели
  $('#multiCarousel').carousel({
    interval: 3000  // Автопрокрутка каждые 3 секунды
  });

  // Клонирование следующих элементов для показа нескольких слайдов
  $('#multiCarousel .carousel-item').each(function(){
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    // Клонируем еще 2 элемента для показа 3-4 слайдов
    for (var i = 0; i < 2; i++) {
      next = next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
    }
  });
});

Как работает алгоритм:

1. Для каждого .carousel-item находим следующий элемент
2. Клонируем его содержимое и добавляем в текущий item
3. Повторяем 2 раза чтобы получить 3-4 элемента в ряду
4. CSS transform сдвигает слайды на нужный процент (25%, 33.33% или 50%)
5. При переключении Bootstrap анимирует transform свойство

Центральная карусель (BS4)

Этот способ создаёт эффект глубины: центральный слайд выделен и увеличен, а по краям видны части соседних слайдов. Боковые слайды кликабельны — клик переключает карусель.

HTML разметка

<div id="centeredCarousel" class="carousel slide carousel-centered" data-ride="carousel">
  
  <!-- Индикаторы -->
  <ol class="carousel-indicators">
    <li data-target="#centeredCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#centeredCarousel" data-slide-to="1"></li>
    <li data-target="#centeredCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="centered-slides-container" id="slidesContainer">
        <!-- Слайды добавятся через JavaScript -->
      </div>
    </div>
  </div>

  <!-- Кнопки управления -->
  <a class="carousel-control-prev" href="#centeredCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#centeredCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

CSS стили

/* Контейнер для слайдов */
.centered-slides-container {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Общие стили слайда */
.centered-slide {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.centered-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ЦЕНТРАЛЬНЫЙ СЛАЙД */
.centered-slide.center {
  width: 600px;
  height: 400px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: default;
}

.centered-slide.center img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ЛЕВЫЙ СЛАЙД */
.centered-slide.left {
  width: 400px;
  height: 300px;
  left: 50%;
  transform: translateX(-100%) translateX(-50px);
  z-index: 5;
  opacity: 0.7;
}

.centered-slide.left:hover {
  opacity: 0.9;
  transform: translateX(-100%) translateX(-40px) scale(1.05);
}

/* ПРАВЫЙ СЛАЙД */
.centered-slide.right {
  width: 400px;
  height: 300px;
  left: 50%;
  transform: translateX(50px);
  z-index: 5;
  opacity: 0.7;
}

.centered-slide.right:hover {
  opacity: 0.9;
  transform: translateX(60px) scale(1.05);
}

/* Адаптивность */
@media (max-width: 575px) {
  .centered-slide.center {
    width: 90%;
    max-width: 350px;
    height: 250px;
  }
  
  .centered-slide.left,
  .centered-slide.right {
    display: none;
  }
}

JavaScript (jQuery)

(function($) {
  'use strict';

  var slidesData = [
    { src: 'image1.jpg', title: 'Слайд 1' },
    { src: 'image2.jpg', title: 'Слайд 2' },
    { src: 'image3.jpg', title: 'Слайд 3' }
  ];

  var currentIndex = 0;
  var totalSlides = slidesData.length;
  var $container = $('#slidesContainer');

  // Получение индекса с зацикливанием
  function getCircularIndex(index) {
    return ((index % totalSlides) + totalSlides) % totalSlides;
  }

  // Отрисовка 3 слайдов
  function renderSlides() {
    $container.empty();

    var leftIndex = getCircularIndex(currentIndex - 1);
    var centerIndex = currentIndex;
    var rightIndex = getCircularIndex(currentIndex + 1);

    // Левый слайд (только на desktop)
    if ($(window).width() > 575) {
      var $leftSlide = createSlide(leftIndex, 'left');
      $leftSlide.on('click', gotoPrevious);
      $container.append($leftSlide);
    }

    // Центральный слайд
    var $centerSlide = createSlide(centerIndex, 'center');
    $container.append($centerSlide);

    // Правый слайд
    if ($(window).width() > 575) {
      var $rightSlide = createSlide(rightIndex, 'right');
      $rightSlide.on('click', gotoNext);
      $container.append($rightSlide);
    }
  }

  // Создание элемента слайда
  function createSlide(index, position) {
    var $slide = $('
').addClass('centered-slide ' + position);
    var $img = $('').attr('src', slidesData[index].src);
    $slide.append($img);
    
    if (position === 'center') {
      var $caption = $('
').addClass('slide-caption')
        .text(slidesData[index].title);
      $slide.append($caption);
    }
    
    return $slide;
  }

  // Навигация
  function gotoPrevious() {
    currentIndex = getCircularIndex(currentIndex - 1);
    renderSlides();
  }

  function gotoNext() {
    currentIndex = getCircularIndex(currentIndex + 1);
    renderSlides();
  }

  // Отмена стандартного поведения Bootstrap
  $('#centeredCarousel').on('slide.bs.carousel', function(e) {
    e.preventDefault();
  });

  // Обработчики кнопок
  $('.carousel-control-prev').on('click', function(e) {
    e.preventDefault();
    gotoPrevious();
  });

  $('.carousel-control-next').on('click', function(e) {
    e.preventDefault();
    gotoNext();
  });

  // Инициализация
  renderSlides();

})(jQuery);

Равномерная карусель (BS5)

Версия для Bootstrap 5 работает без jQuery, используя только Vanilla JavaScript. Основная логика та же, но синтаксис изменён.

Подключение Bootstrap 5

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript Bundle (jQuery НЕ нужен!) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

HTML разметка

Изменения в Bootstrap 5:

• data-ride → data-bs-ride
• data-slide → data-bs-slide
• data-target → data-bs-target
• .sr-only → .visually-hidden

<div id="multiCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    
    <div class="carousel-item active">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <img src="image1.jpg" class="d-block w-100" alt="Слайд 1">
      </div>
    </div>

    <div class="carousel-item">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <img src="image2.jpg" class="d-block w-100" alt="Слайд 2">
      </div>
    </div>

    <!-- Добавьте остальные слайды -->

  </div>

  <button class="carousel-control-prev" type="button" 
          data-bs-target="#multiCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Предыдущий</span>
  </button>
  <button class="carousel-control-next" type="button" 
          data-bs-target="#multiCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Следующий</span>
  </button>
</div>

CSS стили

/* Активный слайд и соседние в ряд */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* Анимация вправо */
.carousel-inner .carousel-item-next.carousel-item-start,
.carousel-inner .carousel-item-prev.carousel-item-end {
  transform: translateX(0);
}

/* Следующий слайд справа (25% для 4 элементов) */
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

/* Предыдущий слайд слева */
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

/* Адаптация для разных экранов */
@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-inner .carousel-item-next {
    transform: translateX(33.33%);
  }
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.33%);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }
  .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }
}

JavaScript (Vanilla JS, без jQuery!)

document.addEventListener('DOMContentLoaded', function() {
  
  const multiCarousel = document.querySelector('#multiCarousel');
  
  if (!multiCarousel) return;

  // Инициализируем Bootstrap 5 карусель
  const carousel = new bootstrap.Carousel(multiCarousel, {
    interval: 3000,
    wrap: true
  });

  const items = multiCarousel.querySelectorAll('.carousel-item');
  
  // Определяем количество элементов на экране
  function getItemsPerSlide() {
    const width = window.innerWidth;
    if (width >= 1200) return 4;
    if (width >= 992) return 3;
    if (width >= 768) return 2;
    return 1;
  }

  // Клонируем соседние слайды
  function cloneItems() {
    const itemsPerSlide = getItemsPerSlide();
    
    // Очищаем старые клоны
    items.forEach(item => {
      const clones = item.querySelectorAll('.cloned');
      clones.forEach(clone => clone.remove());
    });

    // Создаём новые клоны
    items.forEach((item, index) => {
      for (let i = 1; i < itemsPerSlide; i++) {
        const nextIndex = (index + i) % items.length;
        const nextItem = items[nextIndex];
        const clone = nextItem.querySelector('div[class^="col-"]').cloneNode(true);
        clone.classList.add('cloned');
        item.appendChild(clone);
      }
    });
  }

  // Первоначальное клонирование
  cloneItems();

  // Пересоздаём при resize
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(cloneItems, 250);
  });

  console.log('Bootstrap 5 Multiple Carousel инициализирована');
});

Преимущества Vanilla JS версии:

• Легче на 85 KB — не нужен jQuery
• Быстрее — нативные методы работают эффективнее
• Современно — ES6+ синтаксис (const, let, arrow functions)
• Меньше зависимостей — проще поддержка

Центральная карусель BS5

Центральная карусель для Bootstrap 5 с кликабельными боковыми слайдами на чистом JavaScript.

HTML разметка

<div id="centeredCarousel" class="carousel slide carousel-centered" data-bs-ride="carousel">
  
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#centeredCarousel" 
            data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#centeredCarousel" 
            data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#centeredCarousel" 
            data-bs-slide-to="2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="centered-slides-container" id="slidesContainer">
        <!-- Слайды добавятся через JavaScript -->
      </div>
    </div>
  </div>

  <button class="carousel-control-prev" type="button">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

JavaScript (Vanilla JS)

(function() {
  'use strict';

  const slidesData = [
    { src: 'image1.jpg', title: 'Слайд 1' },
    { src: 'image2.jpg', title: 'Слайд 2' },
    { src: 'image3.jpg', title: 'Слайд 3' }
  ];

  let currentIndex = 0;
  const totalSlides = slidesData.length;
  const carousel = document.getElementById('centeredCarousel');
  const container = document.getElementById('slidesContainer');

  // Получение индекса с зацикливанием
  function getCircularIndex(index) {
    return ((index % totalSlides) + totalSlides) % totalSlides;
  }

  // Отрисовка слайдов
  function renderSlides() {
    container.innerHTML = '';

    const leftIndex = getCircularIndex(currentIndex - 1);
    const centerIndex = currentIndex;
    const rightIndex = getCircularIndex(currentIndex + 1);

    // Левый слайд
    if (window.innerWidth > 575) {
      const leftSlide = createSlideElement(leftIndex, 'left');
      leftSlide.addEventListener('click', () => gotoPrevious());
      container.appendChild(leftSlide);
    }

    // Центральный
    const centerSlide = createSlideElement(centerIndex, 'center');
    container.appendChild(centerSlide);

    // Правый
    if (window.innerWidth > 575) {
      const rightSlide = createSlideElement(rightIndex, 'right');
      rightSlide.addEventListener('click', () => gotoNext());
      container.appendChild(rightSlide);
    }
  }

  // Создание элемента слайда
  function createSlideElement(index, position) {
    const slide = document.createElement('div');
    slide.className = `centered-slide ${position}`;
    slide.innerHTML = `
      ${slidesData[index].title}
      ${position === 'center' ? `
${slidesData[index].title}
` : ''}
    `;
    return slide;
  }

  // Навигация
  function gotoPrevious() {
    currentIndex = getCircularIndex(currentIndex - 1);
    renderSlides();
    updateIndicators();
  }

  function gotoNext() {
    currentIndex = getCircularIndex(currentIndex + 1);
    renderSlides();
    updateIndicators();
  }

  function gotoSlide(index) {
    currentIndex = index;
    renderSlides();
    updateIndicators();
  }

  // Обновление индикаторов
  function updateIndicators() {
    const indicators = carousel.querySelectorAll('.carousel-indicators button');
    indicators.forEach((indicator, index) => {
      if (index === currentIndex) {
        indicator.classList.add('active');
      } else {
        indicator.classList.remove('active');
      }
    });
  }

  // Обработчики событий
  carousel.querySelector('.carousel-control-prev').addEventListener('click', (e) => {
    e.preventDefault();
    gotoPrevious();
  });

  carousel.querySelector('.carousel-control-next').addEventListener('click', (e) => {
    e.preventDefault();
    gotoNext();
  });

  carousel.querySelectorAll('.carousel-indicators button').forEach((button, index) => {
    button.addEventListener('click', (e) => {
      e.preventDefault();
      gotoSlide(index);
    });
  });

  // Автопрокрутка
  let autoplayInterval = setInterval(gotoNext, 4000);

  carousel.addEventListener('mouseenter', () => {
    clearInterval(autoplayInterval);
  });

  carousel.addEventListener('mouseleave', () => {
    autoplayInterval = setInterval(gotoNext, 4000);
  });

  // Resize
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(renderSlides, 250);
  });

  // Поддержка клавиатуры
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') gotoPrevious();
    if (e.key === 'ArrowRight') gotoNext();
  });

  // Инициализация
  renderSlides();

  console.log('✅ Bootstrap 5 Centered Carousel инициализирована');
})();

Настройка и кастомизация

Изменение количества элементов

Для показа 5 элементов на больших экранах:

<!-- HTML -->
<div class="col-12 col-md-6 col-lg-4 col-xl-2-4">

/* CSS */
@media (min-width: 1200px) {
  .col-xl-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  /* Изменяем transform */
  .carousel-inner .carousel-item-next {
    transform: translateX(20%);
  }
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%);
  }
}

Изменение скорости автопрокрутки

Bootstrap 4 (jQuery):

$('#multiCarousel').carousel({
  interval: 5000  // 5 секунд
});

Bootstrap 5 (Vanilla JS):

const carousel = new bootstrap.Carousel(element, {
  interval: 5000  // 5 секунд
});

Отключение автопрокрутки

// Установите interval: false
$('#multiCarousel').carousel({
  interval: false
});

Отключение зацикливания

// Карусель остановится на последнем слайде
new bootstrap.Carousel(element, {
  wrap: false
});

Частые проблемы и решения

Проблема 1: Слайды наезжают друг на друга.

• Причина: CSS стили не подключены или подключены неправильно.
• Решение: убедитесь что CSS добавлен ПОСЛЕ подключения Bootstrap CSS, не до.

Проблема 2: JavaScript не работает (Bootstrap 4).

• Причина: jQuery не подключен или подключен после Bootstrap JS.
• Решение: Порядок подключения должен быть: jQuery → Bootstrap JS → Ваш код.

Проблема 3: Показывается только 1 элемент.

• Причина: JavaScript код клонирования не выполнился.

Решение:

• Откройте консоль браузера (F12) и проверьте ошибки
• Убедитесь что JavaScript находится после подключения Bootstrap
• Проверьте правильность ID карусели

Проблема 4: На мобильных отображается неправильно.

• Причина: Не добавлены медиа-запросы или классы col-12.
• Решение: Добавьте адаптивные классы и медиа-запросы из примеров.

Проблема 5: Центральная карусель не центрирована.

• Причина: Неправильное позиционирование или контейнер overflow.
• Решение: Убедитесь что родительский контейнер имеет overflow: hidden и используйте left: 50%; transform: translateX(-50%) для центрирования.

Какой способ выбрать?

Заключение

Вы изучили 4 способа создания каруселей с несколькими элементами:

• Равномерная — классическое решение с jQuery для проектов на BS4.
• Центральная — эффектная карусель с центральным фокусом с jQuery для проектов на BS4.
• И такие же способы для BS5 на Vanilla JS.

Рекомендации для продакшена:

• Lazy loading. Добавьте loading="lazy" для изображений;
• Оптимизация. Используйте WebP формат и сжатие;
• Alt текст. Обязательно для SEO и accessibility;
• Responsive images. Используйте srcset для разных размеров;
• Минификация. Сжимайте CSS и JS перед деплоем;
• Тестирование. Проверяйте на реальных устройствах;

Что дальше?

Теперь вы можете:

• Создавать карусели с любым количеством элементов
• Адаптировать их под любой дизайн
• Использовать как Bootstrap 4, так и Bootstrap 5
• Реализовывать сложные эффекты (центральный фокус)
• Решать возникающие проблемы

Успехов в разработке!