bootstrap 4 карусель из нескольких элементов

bootstrap

В данном уроке разберемся в том, как из стандартной bootstrap 4 карусели (слайдера), сделать карусель из нескольких элементов (Bootstrap 4 Multiple Item Carousel).

HTML разметка карусели

К примеру, мы хотим чтобы у нас на экране отображалось сразу 3 слайда, тогда разметка будет следующая

<div id="multiCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block col-4" src="https://source.unsplash.com/eWFdaPRFjwE/1200x400">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-4" src="https://source.unsplash.com/juHayWuaaoQ/1200x400">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-4" src="https://source.unsplash.com/eXHeq48Z-Q4/1200x400">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-4" src="https://source.unsplash.com/WLUHO9A_xik/1200x400">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-4" src="https://source.unsplash.com/ddLiNMqWAOM/1200x400">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-4" src="https://source.unsplash.com/eXHeq48Z-Q4/1200x400">
                </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">Cледующий</span>
            </a>
        </div>

CSS код

img{max-width:100%;height:auto}  
.carousel-inner .carousel-item.active,.carousel-inner .carousel-item-next,.carousel-inner .carousel-item-prev{display:flex}
.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)}

JS код

$('#multiCarousel').carousel({
  interval: 10000
})
$('.carousel .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));
      }
});

На выходе получаем.

Bootstrap 4 Carousel из 3х слайдов в ряду

Если в вызове слайдов изменить col-4 на col-3.

изменяем количество слайдов в каруселе

Получим карусель из 4х колонок

карусель из 4х колонок

Теперь сделаем карусель с немного другим подходом, чтобы по центру был основной слайд и по краям была половина следующего и предыдущего слайда.

html разметка

<div id="carousel-1" class="carousel slide multi-carousel" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
        <li data-target="#carousel-1" data-slide-to="3"></li>
        <li data-target="#carousel-1" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="item-third"><img src="https://source.unsplash.com/juHayWuaaoQ/1200x400" alt="#"></div>
        </div>
        <div class="carousel-item">
          <div class="item-third"><img src="https://source.unsplash.com/eWFdaPRFjwE/1200x400" alt="#"></div>
        </div>
        <div class="carousel-item">
          <div class="item-third"><img src="https://source.unsplash.com/eXHeq48Z-Q4/1200x400" alt="#"></div>
        </div>
        <div class="carousel-item">
          <div class="item-third"><img src="https://source.unsplash.com/WLUHO9A_xik/1200x400" alt="#"></div>
        </div>
        <div class="carousel-item">
          <div class="item-third"><img src="https://source.unsplash.com/ddLiNMqWAOM/1200x400" alt="#"></div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Cледующий</span>
      </a>
    </div>

Css стили

img{max-width:100%;height:auto}  
.multi-carousel{overflow:hidden}
.multi-carousel .carousel-control-prev,.multi-carousel .carousel-control-next{background:rgba(255,255,255,0.5);width:5%}
.multi-carousel .carousel-inner{width:310%;left:-80%}
.carousel-inner .carousel-item-right.active,.carousel-inner .carousel-item-next{transform:translateX(75%)}
.carousel-inner .carousel-item-left.active,.carousel-inner .carousel-item-prev{transform:translateX(-75%)}
.carousel-inner .carousel-item-right,.carousel-inner .carousel-item-left{transform:translateX(0)}
.item-third{float:left;width:25%;background-size:cover;height:auto}

JS

$('.multi-carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) next = $(this).siblings(':first');
  next.children(':first-child').clone().appendTo($(this));
});
$('.multi-carousel .carousel-item').each(function() {
  var prev = $(this).prev();
  if (!prev.length) prev = $(this).siblings(':last');
  prev.children(':nth-last-child(2)').clone().prependTo($(this));
});

На выходе получаем.

bootstrap-4-Multiple-Item-Carousel-centered

Смотреть демо.

Скачать демо.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 14 оценок, среднее 3.14 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Ирина

    Пример первый не работает и тут дело не в том, что я что-то не так скопировала из примера. Просто код действительно не рабочий. В самом проекте все файлы у меня подключены верно, так как другие слайдеры отлично работают с подключенными bootstrap и jquery.
    Ниже и другие комментаторы отметили, что примеры не работают, так что, автор, ищите у себя ошибку)
    То, что демоверсии работают — не значит, что выложенный код предоставлен верно)

    Ответить
    1. Алексей автор

      Только что проверил 1 код, взял стартовый шаблон https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template подключил к нему разметку карусели стили и скрипт — и карусель работает и в демке он работает! Если у вас не работает значит неправильно подключили или конфликтует с другими библиотеками! Что то не устраивает напишите самостоятельно, не зря же говорят хочешь хорошо сделай сам!
      А вот второй код косячненько без первого работает — в нем есть косяк, кому надо сами поправят. А вообще я сто лет не пользуюсь бутстраповскими слайдерами, т.к. есть слайдеры намного интереснее и более гибкие!

      Ответить
  2. Asemay

    ни один из примеров не отработал, хотя код точь в точь скопирован(((

    Ответить
    1. Алексей автор

      Когда писал работало и в демо работает https://web-revenue.ru/demo/bootstrap4-multiple-Item-carousel.html. Сам этим больше не пользуюсь (вообще выпиливаю функционал bs слайдов), рекомендую использовать библиотеку Swiper или Owl carousel для создания слайдеров любой сложности.

      Ответить
  3. Егор Пургин

    Подскажите, не показывается несколько элементов (брал второй вариант), что нужно поправить, чтобы работало?

    Ответить
    1. Голягин Алексей

      Только что обновил в демках версию bootstrap до 4.6.1 все работает: https://web-revenue.ru/demo/bootstrap4-multiple-Item-carousel.html. Проверьте у себя как минимум порядок подключения стилей и скриптов. А также на комфликт с другими библиотеками (проверить можно методом — убрал все, потом подключаешь по одной)

      Ответить
  4. Мари

    Хнык, а 2 разноплановые карусели не работают(( У меня еще 2 обычные бутстрап карусельки, и одна с буквами и картинкой, вторая просто слайдер и когда цепляешь стили и скрипт беда приходит, буквы на буквы накладываются(( Это я затупок или не получится на бутстрапе и надо слик какой нить второй цеплять или еще что?

    Ответить
    1. Алексей автор

      Я бы OWL карусель лучше установил — особенно если слайдеров много разноплановых выводить)

      Ответить
  5. Марибэл

    На выходе, к сожалению, получился просто слайдер без половинок, скопировала весь код, что могло пойти не так?

    Ответить
    1. Алексей автор

      Понятия не имею что у вас могло пойти не так. Смотрите демо — там все работает

      Ответить
  6. Sergey

    пример и действительность не совпадают

    Ответить
    1. Алексей автор

      Вы о чем? Можно подробнее?

      Ответить
      1. Владислав

        О том что Вы наплужили с класами и idхами
        Если вы уже делаете что то поезное так делайте это нормально!!!

        Ответить
        1. Алексей автор

          А что вас не устраивает? Скиньте пример лучшей реализации! Я бутстрап карусель обычно из бутстрапа удаляю и подключаю за место нее OWL carousel 2.x, либо swiper — если сайт без Qwerty)

          Ответить
  7. Мария

    Здравствуйте, подскажите пожалуйста, а если надо 2 карусели на бутстрапе одна стандартная по одному слайду, вторая мульти, то как прописать стили и js?
    id разные я сделала, карусели 2, но мульти не хочет делаться(( и если стили такие делать, то верхняя тоже реагирует))

    Ответить
    1. Алексей автор

      Здравствуйте. Посмотрите демо — там 2 карусели на 1 странице. По поводу js — для стандартной не чего не надо писать, для мульти пишем из статьи. По поводу CSS — у ваших каруселей как вы пишите 2 разных id, следовательно пишите стили под эти id, например: #multiCarousel .carousel-inner .carousel-item-right.active, #multiCarousel .carousel-inner .carousel-item-next{transform:translateX(25%)}

      Ответить