Как сделать свайп css

Обновлено: 07.07.2024

Многие современные разработки не обходятся без ориентации под мобильные/планшеты. Почему бы Вам уже сейчас не начать использовать события swipe для того, чтобы дать мобильным и планшетным пользователям Вашего сайта больше возможностей и создать более комфортные условия для нахождения на сайте?

Простой jQuery плагин под названием TouchSwipe позволит получать события swipe (передвижение пальцами по экрану). Swipe действие делают пользователи, например, во время просмотра фотографий. Это самый удачный пример для понимания, который можно привести. Но оказывается, что это действие очень удобно не только для просмотра фотографий, но и уже сегодня используется на многих сайтах, например, для того же просмотра фото или вызова меню. Кроме того, это позволит использовать свайп-действия мыши (захват и перетаскивание) для пользователей ПК, MAC.

Для того, чтобы начать использовать данную библиотеку, необходимо подключить jQuery и саму библиотеку. Если на странице уже есть подключенный jQuery, то делать повторно это не нужно:

После чего на странице можно использовать следующий jQuery код:

Т.е. весь код сводится к следующему:

В демонстрационных материалах можно найти много интересного. А именно:

можно узнавать сколькими пальцами происходит событие,
в какую сторону прошел swipe,
получать обработчики событий конца swipe

Возможные варианты событий:

Узнать сколько раз произошло событие можно с помощью данного кода:

Узнать количество пальцев:

Пример использования двух и трех пальцев для осуществления события

Обрабатываем события swipe и получаем данные о времени, количестве задействованных пальцев, расстоянию от нажатия, направлении и другие данные:

Кроме того, в примерах и документации Вы сможете найти дополнительные возможности, например, использование zoom - увеличения и уменьшения пальцами и другие.

На этом уроке я расскажу как подключить и настроить самый современный сенсорный слайдер Swiper. Есть несколько причин, почему Swiper лучший слайдер для сайта:

Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. Это значит, что у вас не будет лишнего запроса к серверу.
Его API позволяет создавать собственную разбивку на страницы и кнопки навигации.
Swiper использует для построения макетов с гибкой сеткой технологию Flexbox
Swiper использует технику ленивой загрузки. Он задерживает загрузку изображений на неактивных слайдах, пока пользователь не проведет по ним пальцем. Это ускоряет загрузку страницы.
Swiper абсолютно бесплатен и имеет открытый исходный код

Подключение слайдера Swiper к проекту

2) В разделе Get Started переходим по ссылочке и скачиваем два минифицированных файла swiper-bundle.min.css и swiper-bundle.min.js.

3) Оба файла подключаем к нашему проекту в HTML файле. Помимо скачанных файлов, создадим и также подключим два пустых CSS и JS файла для инициализации и кастомизации слайдера.

// перед закрывающим тегом body

Добавить базовый HTML-макет

Создаем простую HTML структуру и прописываем стандартные классы слайдера. Вместо Slide 1, 2, 3 и.т.д, прописываете ваш контент, это может быть текст, картинки и вообще любые теги.

Инициализация Swiper

Для этого в main.js пропишем следующий код.

Чтобы увидеть как работает слайдер, нужно потянуть мышкой за картину на десктопах или пальцем на мобильных устройствах.

Демонстрация работы базового Swiper

Настройка слайдера Swiper

Однако базовых настроек слайдера не всегда бывает достаточно, особенно если вы работаете по техническому заданию заказчика. Предусмотрена возможность добавлять дополнительные настройки в HTML разметку кастомный JS файл (main.js). Все дополнительные параметры должны отделяться друг от друга запятой.

Добавление стрелок навигации

Слайдер можно снабдить стрелками навигации, при клике на которые будет меняться слайд. Вместо дефолтных классов навигационных стрелок можно прописывать свои классы. Поскольку стили стандартных стрелок реализованы с помощью иконочного шрифта, а значит их цвет и размер легко можно поменять. Это важно для кастомизации Swiper для верстки сайта по дизайнерскому макету.

Вывод пагинации для слайдов

Дефолтный буллиты сделаны в виде кружков и они показываю на каком слайде мы сейчас находимся.

// JS код вывода пагинации
pagination: el: '.swiper-pagination',
>,

Добавление скроллбара

Включим возможность перетаскивания ползунка у скроллбара.

// JS код вывода скроллбара
scrollbar: el: '.swiper-scrollbar',
draggable: true
>,

Элементы управления слайдером мы можем размещать где угодно и стилизовать своими стилями. В статье мы затронули лишь базовые настройки слайдера Swiper. Вы можете самостоятельно изучить больше возможностей слайдера, просмотрев все демоверсии и изучив подробную документацию на сайте слайдера.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

Отличный и лёгкий плагин. Всегда читаю публикации Михаила Юрьевича. В этом слайдере важной особенностью есть возможность подстройка его в адаптивном варианте всего пары селекторов. И наступает полная адаптация. Достаточно прописать .swiper-container < max-width:600px; height: auto; >.swiper-slide img < max-width:100%; >И не надо мучиться с кучей CSS стилей. Если хотите вставить текст вместо картинок или совместно с ним, есть особенности. Размер шрифта сильно масштабируется вместе с адаптированием картинки!? Писать текст через теги Р не получается, только делить через тег ВR. При этом размещение картинки в тексте делит текст пополам, обтекания нет. Но, можно сделать картинку блоком и центрировать как угодно. Вообще слайдер Swiper очень гибкая штука и простая.

Для полноценного прохождения данного курса, рекомендую приобрести дополнительные материалы и бонусные уроки. В архиве дополнительных материалов, кроме файлов проекта, которые нам понадобятся в процессе прохождения курса, говотой верстки, готового сайта и готового дизайна, вы также найдете бонусные уроки по созданию дизайна в Figma и по посадке верстки на Winter CMS (бывш. October).

В данном курсе мы плотно поработаем с API Swiper.js - коллбэки, опции, навигация, синхронизация двух слайдеров, эффекты, параллакс и множество других возможностей. Я покажу, как в своей работе правильно использовать современные плагины, опираясь на документацию и подключать их к проекту. Также, в процессе обучения мы на реальном практическом примере задействуем все возможности Flexbox, Scss и БЭМ-нейминга, в полном объеме.

В дополнительных уроках мы создадим дизайн в Figma, осуществим посадку всей секции на Winter CMS (бывш. October), используя технику Theme Customization и разработаем форму обратной связи с возможностью работать с заявками в админ-панели Winter CMS. Дополнительный материал будет полезен всем, кто желает обеспечить лендинг, лонгрид, имиджевый несложный сайт удобным и понятным бэкендом с возможностью работать с заявками.

SwiperJS у меня не листается свайпом. MacOS 12.0.1 (21A559) Google Chrome 96.0.4664.93 (arm64). Потому SwiperJS уг.