Карусель только для малых экранов

Данное решение написано для библиотеки jQuery и карусели Swiper (тестировалось только на версии 11.1.3)

В примере используется сетка Bootstrap, которая на малых экранах переходит в карусель .

Пример:

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

HTML:

Пример сделан на основе сетки Bootstrap, где к классу row мы добавляем mslider, а к колонкам mslide

Аналогичным образом поступаем и при использовании альтернативной или собственной сетки

CSS:

Добавляем стили swiper и:

jQuery:

Добавляем скрипт swiper и:

Если на странице используется одна карусель, то можно раскомментировать строку mobileswiper.destroy(true, true); и убрать $('.mslider .mslide').removeAttr('style');

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

Пример второй аналогичной карусели на странице:

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • СЕРГЕЙ:

    Александр, это то о чём я вам писал!))))
    Круто! Единственное было бы вообще огонь)), если бы ещё как третий пример, первый блок на весь моб экрана, а следующий слегка выглядывал из-за правого поля. Тем самым ещё больше подталкивал посетителя сайта листать дальше. Можно ли так сделать?
    Типо вот такого

    Ответить
    • Alexander:

      Я тут вообще оформление не делал карусели и ее блоков.
      Что касается пожелания, то тут от самих блоков зависит, например, на весь экран сделать можно, но у нас всегда будет вертикальная прокрутка (за исключением полноэкранных слайдер-лендов каких-нибудь) и соотв. на эту секцию мы попадем как попадем, т.е. не обязательно точно во весь экран, а выше или ниже.
      Это если я правильно про "на весь моб экрана"

      А что касается чтобы следующий выглядывал, он и так скорее всего будет выглядывать, если у контейнеров не задан overflow: hidden;. Плюс можно использовать padding, margin или опцию свипера spaceBetween

      Ответить