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

В данном уроке разберемся в том, как из стандартной 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));
      }
});

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

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

Получим карусель из 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));
});

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

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

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