Мобильный сенсорный слайдер Swiper
На этом уроке я расскажу как подключить и настроить самый современный сенсорный слайдер Swiper. Есть несколько причин, почему Swiper лучший слайдер для сайта:
- Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. Это значит, что у вас не будет лишнего запроса к серверу.
- Его API позволяет создавать собственную разбивку на страницы и кнопки навигации.
- Swiper использует для построения макетов с гибкой сеткой технологию Flexbox
- Swiper использует технику ленивой загрузки. Он задерживает загрузку изображений на неактивных слайдах, пока пользователь не проведет по ним пальцем. Это ускоряет загрузку страницы.
- Swiper абсолютно бесплатен и имеет открытый исходный код
Подключение слайдера Swiper к проекту
// в теге head
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="css/main.css">
// перед закрывающим тегом body
<script src="js/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
Добавить базовый HTML-макет
Создаем простую HTML структуру и прописываем стандартные классы слайдера. Вместо Slide 1, 2, 3 и.т.д, прописываете ваш контент, это может быть текст, картинки и вообще любые теги.
<!-- Общий контейнер -->
<div class="swiper-container">
<!-- Оболочка для слайдера -->
<div class="swiper-wrapper">
<!-- Оболочка для отдельного слайда -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
Инициализация Swiper
Для этого в main.js пропишем следующий код.
new Swiper('.swiper-container');
Чтобы увидеть как работает слайдер, нужно потянуть мышкой за картину на десктопах или пальцем на мобильных устройствах.
Настройка слайдера Swiper
Однако базовых настроек слайдера не всегда бывает достаточно, особенно если вы работаете по техническому заданию заказчика. Предусмотрена возможность добавлять дополнительные настройки в HTML разметку кастомный JS файл (main.js). Все дополнительные параметры должны отделяться друг от друга запятой.
Добавление стрелок навигации
Слайдер можно снабдить стрелками навигации, при клике на которые будет меняться слайд. Вместо дефолтных классов навигационных стрелок можно прописывать свои классы. Поскольку стили стандартных стрелок реализованы с помощью иконочного шрифта, а значит их цвет и размер легко можно поменять. Это важно для кастомизации Swiper для верстки сайта по дизайнерскому макету.
<!-- Добавление стрелочек в HTML код -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
// JS файл
new Swiper('.swiper-container', {
// Вывод стрелок навигации
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
....
})
Вывод пагинации для слайдов
Дефолтный буллиты сделаны в виде кружков и они показываю на каком слайде мы сейчас находимся.
<!-- Добавление буллитов в HTML код -->
<div class="swiper-pagination"></div>
// JS код вывода пагинации
pagination: {
el: '.swiper-pagination',
},
Добавление скроллбара
Включим возможность перетаскивания ползунка у скроллбара.
<!-- Добавление скроллбара в HTML код -->
<div class="swiper-scrollbar"></div>
// JS код вывода скроллбара
scrollbar: {
el: '.swiper-scrollbar',
draggable: true
},
Элементы управления слайдером мы можем размещать где угодно и стилизовать своими стилями. В статье мы затронули лишь базовые настройки слайдера Swiper. Вы можете самостоятельно изучить больше возможностей слайдера, просмотрев все демоверсии и изучив подробную документацию на сайте слайдера.
-
Создано 30.11.2020 10:03:33
-
Михаил Русаков
Комментарии (2):
Отличный и лёгкий плагин. Всегда читаю публикации Михаила Юрьевича. В этом слайдере важной особенностью есть возможность подстройка его в адаптивном варианте всего пары селекторов. И наступает полная адаптация. Достаточно прописать .swiper-container { max-width:600px; height: auto; } .swiper-slide img { max-width:100%; } И не надо мучиться с кучей CSS стилей. Если хотите вставить текст вместо картинок или совместно с ним, есть особенности. Размер шрифта сильно масштабируется вместе с адаптированием картинки!? Писать текст через теги Р не получается, только делить через тег ВR. При этом размещение картинки в тексте делит текст пополам, обтекания нет. Но, можно сделать картинку блоком и центрировать как угодно. Вообще слайдер Swiper очень гибкая штука и простая.
Ответить
Уже давно использую плагин Swiper. Сейчас возникла тупиковая проблема с этим плагином. Возможно дело в том, что я очень плохо знаю JS. В документации указано, что достаточно прописать observer: true, чтобы плагин автоматически отслеживал динамическое изменение html-контента. Но у меня так не работает: при клике на комбинацию подтягиваются другие фото в эту же структуру HTML, остаются и кнопки навигации, но уже скрипт не работает, не листает слайды: http://prntscr.com/13dvsfj .Что я только не пробовал как новичок в JS, ничего не помогло, я подозреваю, что проблема очень примитивная, но не для меня. Буду благодарен за любую помощь. Страница: http://new.forco.com.ua/ru/elektrika-i-elektronika-ford-fyuzhn-fusion-2013-2020/4-175-zadnij-fonar-pravyj-ford-escape-2017-ford-eskejp.html#/1-test-2011_2015
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.