В данном уроке разберемся в том, как из стандартной 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));
});
На выходе получаем.
Пример первый не работает и тут дело не в том, что я что-то не так скопировала из примера. Просто код действительно не рабочий. В самом проекте все файлы у меня подключены верно, так как другие слайдеры отлично работают с подключенными bootstrap и jquery.
Ниже и другие комментаторы отметили, что примеры не работают, так что, автор, ищите у себя ошибку)
То, что демоверсии работают — не значит, что выложенный код предоставлен верно)
Только что проверил 1 код, взял стартовый шаблон https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template подключил к нему разметку карусели стили и скрипт — и карусель работает и в демке он работает! Если у вас не работает значит неправильно подключили или конфликтует с другими библиотеками! Что то не устраивает напишите самостоятельно, не зря же говорят хочешь хорошо сделай сам!
А вот второй код косячненько без первого работает — в нем есть косяк, кому надо сами поправят. А вообще я сто лет не пользуюсь бутстраповскими слайдерами, т.к. есть слайдеры намного интереснее и более гибкие!
ни один из примеров не отработал, хотя код точь в точь скопирован(((
Когда писал работало и в демо работает https://web-revenue.ru/demo/bootstrap4-multiple-Item-carousel.html. Сам этим больше не пользуюсь (вообще выпиливаю функционал bs слайдов), рекомендую использовать библиотеку Swiper или Owl carousel для создания слайдеров любой сложности.
Подскажите, не показывается несколько элементов (брал второй вариант), что нужно поправить, чтобы работало?
Только что обновил в демках версию bootstrap до 4.6.1 все работает: https://web-revenue.ru/demo/bootstrap4-multiple-Item-carousel.html. Проверьте у себя как минимум порядок подключения стилей и скриптов. А также на комфликт с другими библиотеками (проверить можно методом — убрал все, потом подключаешь по одной)
Хнык, а 2 разноплановые карусели не работают(( У меня еще 2 обычные бутстрап карусельки, и одна с буквами и картинкой, вторая просто слайдер и когда цепляешь стили и скрипт беда приходит, буквы на буквы накладываются(( Это я затупок или не получится на бутстрапе и надо слик какой нить второй цеплять или еще что?
Я бы OWL карусель лучше установил — особенно если слайдеров много разноплановых выводить)
На выходе, к сожалению, получился просто слайдер без половинок, скопировала весь код, что могло пойти не так?
Понятия не имею что у вас могло пойти не так. Смотрите демо — там все работает
пример и действительность не совпадают
Вы о чем? Можно подробнее?
О том что Вы наплужили с класами и idхами
Если вы уже делаете что то поезное так делайте это нормально!!!
А что вас не устраивает? Скиньте пример лучшей реализации! Я бутстрап карусель обычно из бутстрапа удаляю и подключаю за место нее OWL carousel 2.x, либо swiper — если сайт без Qwerty)
Здравствуйте, подскажите пожалуйста, а если надо 2 карусели на бутстрапе одна стандартная по одному слайду, вторая мульти, то как прописать стили и js?
id разные я сделала, карусели 2, но мульти не хочет делаться(( и если стили такие делать, то верхняя тоже реагирует))
Здравствуйте. Посмотрите демо — там 2 карусели на 1 странице. По поводу js — для стандартной не чего не надо писать, для мульти пишем из статьи. По поводу CSS — у ваших каруселей как вы пишите 2 разных id, следовательно пишите стили под эти id, например: #multiCarousel .carousel-inner .carousel-item-right.active, #multiCarousel .carousel-inner .carousel-item-next{transform:translateX(25%)}