Пример:
Уменьшите экран до менее чем 767px, чтобы включилась карусель.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row mslider"> <div class="col-sm-6 col-md-4 mslide"> <div class="myblock">Блок 1</div> </div> <div class="col-sm-6 col-md-4 mslide"> <div class="myblock">Блок 2</div> </div> <div class="col-sm-6 col-md-4 mslide"> <div class="myblock">Блок 3</div> </div> </div> |
Пример сделан на основе сетки Bootstrap, где к классу row мы добавляем mslider, а к колонкам mslide
Аналогичным образом поступаем и при использовании альтернативной или собственной сетки
CSS:
Добавляем стили swiper и:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media screen and (max-width:767px) { .mslider { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .mslide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } } .myblock { margin-bottom: 30px; background-color: #BFE2FF; padding: 20px; } |
jQuery:
Добавляем скрипт swiper и:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
let swiperinit = false; let mobileswiper; function swiperOn() { if (window.innerWidth <= 767) { $('.mslider').wrapInner('<div class="swiper-wrapper"></div>'); $('.mslider').append('<div class="swiper-pagination"></div>'); swiperinit = true; mobileswiper = new Swiper('.mslider', { slideClass: 'mslide', pagination: { // clickable: true, el: '.swiper-pagination', }, breakpoints: { 0: { slidesPerView: 1, }, 576: { slidesPerView: 2, } }, }); } else if (swiperinit) { $('.mslider .swiper-wrapper').contents().unwrap(); $('.mslider .swiper-pagination').remove(); $('.mslider .mslide').removeAttr('style'); //mobileswiper.destroy(true, true); swiperinit = false; } } swiperOn(); $(window).resize(swiperOn); |
Если на странице используется одна карусель, то можно раскомментировать строку mobileswiper.destroy(true, true); и убрать $('.mslider .mslide').removeAttr('style');
Настройки, методы и события карусели можно посмотреть на сайте разработчиков Swiper API
Александр, это то о чём я вам писал!))))
Круто! Единственное было бы вообще огонь)), если бы ещё как третий пример, первый блок на весь моб экрана, а следующий слегка выглядывал из-за правого поля. Тем самым ещё больше подталкивал посетителя сайта листать дальше. Можно ли так сделать?
Типо вот такого
Я тут вообще оформление не делал карусели и ее блоков.
Что касается пожелания, то тут от самих блоков зависит, например, на весь экран сделать можно, но у нас всегда будет вертикальная прокрутка (за исключением полноэкранных слайдер-лендов каких-нибудь) и соотв. на эту секцию мы попадем как попадем, т.е. не обязательно точно во весь экран, а выше или ниже.
Это если я правильно про "на весь моб экрана"
А что касается чтобы следующий выглядывал, он и так скорее всего будет выглядывать, если у контейнеров не задан overflow: hidden;. Плюс можно использовать padding, margin или опцию свипера spaceBetween