Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js

Привет! В этом видео - большой обзор лучшего (на мой взгляд) слайдера для сайта - swiper.js! Он написан на чистом js, имеет кучу настроек и очень удобен в использовании. Устраивайся поудобнее, в ближайший час я расскажу все самое основное при работе с данным плагином :)
clck.ru/PyQVz - Все примеры в одном месте, на GitHub :)
swiperjs.com/ - оф. сайт плагина
Содержание:
00:00 - Вступление
00:35 - Базовый слайдер (кол-во слайдов, их группировка, стили кнопок и точек)
18:00 - Выносим кнопки из слайдера
22:30 - Цифровая пагинация
24:13 - Автоплей слайдера
24:57 - Адаптация под разные устройства
27:50 - Делаем разную ширину слайдов
29:48 - Слайдер с увеличенным слайдом в центре
32:39 - Слайдер с тремя выделенными слайдами в центре
34:20 - Lazy load
37:23 - Вертикальный слайдер с превью
45:40 - Как сделать свои классы у слайдера
48:34 - Методы и события
56:34 - Как сделать несколько слайдеров на одной странице
01:02:30 - Слайдер на фоне секции с fade-эффектом
01:06:04 - Превращение в слайдер на мобильных устройствах
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Моя группа по верстке сайтов: maxgraph
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #swiperjs #слайдер

[@0xlex695]

У Вас очень крутой контент! Спасибо Вам огромное! Вы разбираете такие тонкости, которых другие даже не касаются!

[@maxgraph]

Спасибо, стараюсь)

[@one-zero-dev]

Очень подробные и понятные разборы по вёрстке. Спасибо за контент!

[@peterparker3794]

Очень сильно помог разобраться в этом слайдере, спасибо вам большое Макс! Масимально понятно и подробно показываете, прямо как BrainsCloud , вы явно очень похожи по подаче материала. Просто супер.

[@maxgraph]

Пожалуйста))

[@kirillsander4607]

Спасибо максун, везде искал как правильно расположить этот слайдер у себя в блоке на сайте, нашел у тебя, также классно объяснил, все подробности изложил, про все тонкости рассказал (хотя по swiper найти что-то стоящее у меня не получилось кроме как у тебя). Спасибо большое! Продолжай снимать такой контент!

[@maxgraph]

спасибо)

[@olehua7602]

Спасибо большое. Наконец, благодаря Вашему видео получилось сделать то что нужно по макету. Жду новое видео по слайдеру

[@vzrosly_muzik]

Простым языком, все понятно и легко в обучении. Спасибо вам, Максим :) Пора делать слайдер!

[@maxgraph]

спасибо)

[@maxgraph]

@Rep Fan а какой в этом смысл?)

[@maxgraph]

@Rep Fan да может и нет. Но практического смысла никакого нет ведь. Чисто в надежде собрать просмотры? Все равно сделать что-то даже похожее на свайпер - это крайне сложная и долгая задача :) В целом то я не против, но смысла - ноль)

[@maxgraph]

@Rep Fan рад помочь))

[@realjones]

Круто! Очень подробно, доходчиво и понятно! Так и нужно объяснять, спасибо)

[@maxgraph]

спасибо)

[@user-lc6gy2ev5r]

Огромное спасибо, облазил половину интернета и не нашёл более лучшего примера инициализации слайдера только в мобильной версии. Большущий лайк!

[@maxgraph]

Пожалуйста)

[@user-eb5zg9qp4l]

Спасибо большое за информацию, особенно за "Превращение в слайдер на мобильных устройствах" ТО что было мне нужно))

[@maxgraph]

Пожалуйста)

[@davidfromnorth7836]

очень грамотно ответил на все вопросы, которые у меня были в голове по оформлению этого слайдера

[@maxgraph]

старался) спасибо

[@Denik-is6gi]

очень полезный обзор спасибо! Вроде столько раз пользовался этим плагином, а и не мало нового узнал. )

[@tonit2237]

Реально очень полезный видос) Это ЛАЙК! Как будет время, сделай пжл продолжение по данному слайдеру на счет настройки вертикального слайдера) Думаю, это зайдет) Спс и удачи

[@maxgraph]

Спасибо)

[@user-ot3do5qw5y]

Оч классный видос, прям по полочкам) прям Очень помог разобраться с некоторыми штуками. Атомный лайк)

[@maxgraph]

Рад помочь)

[@user-sg9jo2hu3x]

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

[@maxgraph]

Пожалуйста)

[@yaninapihal6325]

Лучшее объяснение слайдера!!! С первого раза понятны все тонкости

[@maxgraph]

Спасибо)

[@artemrepin1746]

Я так думаю лучшее видео по свайперу, как минимум одно из !

[@alessiorichter3634]

Охрененное видео! Нашел ответ для решения проблемы. Большое спасибо. Подписался на канал.

[@maxgraph]

Спасибо)

[@user-nq2le6yz5g]

То что нужно. Контент огонь!

[@a.k.9386]

Макс, как я рад что нашел твой канал!

[@maxgraph]

Здорово))

[@k0pernik91]

Все просто, понятно. Лайк и подписка)

[@user-gg8sz1of8z]

Огромный респект, слайдер отличный, объяснения более чем отличные - даже для блондинок понятно. Главное, что этот слайдер абсолютно легко встал в wordpress

[@maxgraph]

Здорово)

[@user-gg8sz1of8z]

@@maxgraph А вот история с 2-мя слайдерами получилась интересная, просто в верстке все отлично встало, а на WP - первый слайдер - ок, а на втором кнопка листает и свой и первый , но, возможно, я не знаю какого-то очередного прикола WP . Кстати отлично встали в слайдер не только картинки, но и цикл вывода последних постов

[@JuiSosu]

ХОЧУ ОТДЕЛЬНО ПОБЛАГОДАРИТЬ ВАШУ МАТЕРЬ С ОТЦОМ ЗА ТО,ЧТО СОЗДАЛИ ТАКОГО ПРЕКРАСНОГО ЧЕЛОВЕКА.Боже,спасибо вам огромное

[@maxgraph]

Спасибо)

[@robertvaksman2033]

БОльшое человеческое Спасибо,Макс!

[@maxgraph]

Пожалуйста)

[@Anatoli-bq1pe]

Благодарю за полезный видос!

[@Expertdog]

отличное видео!!! а самое главное понятно и доступно рассказано. Но вопросы появятся позже)))))

[@maxgraph]

Спасибо)

[@evgeniyk4850]

Спасибо! Очень помогло решение со слайдером на мобилках! В принципе я знал что найду именно у тебя на канале)!

[@maxgraph]

Пожалуйста)

[@dzmitrykubarski1462]

Супер! Спасибо вам огромное)

[@mefioz2397]

Долго я пытался понять как скрыть эти чертовы стрекли, на 12:15 ты решил мою проблему, спасибо мужик !!

[@maxgraph]

Пожалуйста)

[@Gerlinda137]

У вас замечательный канал с очень полезными видео! Спасибо!

[@maxgraph]

Спасибо)

[@Gerlinda137]

@@maxgraph подскажите пожалуйста, если у меня проект на gulp, могу ли я так же как вы подключить плагин? Или нужен другой способ

[@maxgraph]

Можете)

[@user-qc6rk9lm1l]

Спасибо! все понятно и доступно! пошла заниматься

[@maxgraph]

Пожалуйста)

[@juliajuli1257]

Огроменное спасибо!!!))))))

[@temamx]

Очень круто, спасибо!

[@maxgraph]

Пожалуйста)

[@sergeypeksymov6549]

Видео топчик. Спасибо👍

[@maxgraph]

Пожалуйста)

[@vanityzzz3114]

Спасибо большое, очень помог, уже нервы сдавали, но увидел твой видос и все вопросы ушли)

[@maxgraph]

Пожалуйста)

[@elif.3258]

Спасибо за видео. Полезное👍

[@maxgraph]

Пожалуйста)

[@alexandrgusletsov2567]

канал - надежный источник знаний

[@PRO-vr1pm]

Спасибо , мне надо было знать, несколько слайдеров на одной странице )

[@maxgraph]

Пожалуйста)

[@xoxo2880808]

Большое тебе спасибо за этот ролик!

[@maxgraph]

Пожалуйста)

[@ivankrashevskyi3837]

Спасибо, помог в проекте))

[@maxgraph]

Пожалуйста)

[@igrrrra]

То, что надо!!! Прям лайк! лайк! лайк! Спасибо тебе!

[@maxgraph]

Рад помочь)

[@igrrrra]

Это лучшее видео про слайдеры, на ютубе! А я их, наверное, все пересмотрела. Так, что так держать!!!

[@maxgraph]

@@igrrrra стараюсь))

[@user-ve4jo6ep9j]

Спасибо, очень помогло

[@irinashm803]

Спасибо за это видео!

[@maxgraph]

Пожалуйста)

[@ivan.tsybko]

Может кому-то понадобится: Если слайдер никак не хочет работать нормально (особенно если он в табах находится или это один из нескольких слайдеров), то попробуйте добавить следующие параметры: observer: true, observeParents: true, observeSlideChildren: true,

[@user-pf6jf9oz2t]

блин , ты мне помог, у меня адаптив только после f5 происходил , голову ломал , думаю ну была ни была вставил твои настройки и блин заработало . хотя перед этим сам это свойство прописывал , но только первую строчку - и было нифига . кароч , спасибо , заработало !

[@TheQmast3r]

четко, то что нужно, спасибо

[@maxgraph]

Пожалуйста)

[@Sergey_Klimov]

ДА СПАСИБО ТЕБЕ ОГРОМНЕЙШЕЕ!! ПОЧЕМУ НИКТО НИКОГДА НЕ ГОВОРИТ, ЧТО ЭТИ ПАГИНАЦИИ И НАВИГАЦИИ НЕ ОБЯЗАТЕЛЬНО ДОЛЖНЫ ЛЕЖАТЬ В КОНТЕЙНЕРЕ

[@maxgraph]

Пожалуйста)

[@crafters2454]

Спасибо огромное я в первые использую фреймворк и я должен был добавить номер никак не мог спасибо ты помог подписка от меня

[@senianga1]

Круто!

[@evgeniivavilo8678]

супер видео. спасибо

[@maxgraph]

Пожалуйста)

[@timshermatov5113]

Вообще красавчик))

[@maxgraph]

Спасибо)

[@user-fi9zq3xq5p]

Спасибо тебе большое!!!

[@ohwooow1223]

Спасибо тебе :)

[@aleksius7819]

спасибо, подписался, хорошо рассказал.

[@maxgraph]

Спасибо!)

[@anikinae]

Комментарий в знак благодарности за видео

[@maxgraph]

Спасибо)

[@detro1821]

Просто лучший человек на земле!!!

[@maxgraph]

Спасибо))

[@mykhailo6062]

Спасибо большое!!!

[@maxgraph]

Пожалуйста)

[@AlexanderShinigami]

Огнище!

[@maxgraph]

👍

[@Vitalynov]

Все очень понятно! Спасибо! Хотелось бы еще понять, как инициализировать Swiper-ы в табах? Очень просим.

[@maxgraph]

да также как обычно. но когда табы переключаем - просто вызываем update() у слайдера.

[@kasparsburvis7371]

Спасибо вам за вашу работу, все понятно и доступно! Хотел только подсказать что пример №6 Слайдер с увеличенным слайдом по центру можно сделать при помощи coverflowEffect без CSS

[@maksrygaev657]

ОГРОМНОЕ СПАСИБА ИУУУ

[@maxgraph]

Пожалуйста

[@user-pi7tb2cj2x]

Красава!!!!!!!!!

[@maxgraph]

Спасибо)

[@sencorio]

Спасибо, очень своевременно! Видео отличается последовательностью и структурой - мне так намного легче воспринимать. Однако, названия разделов уж очень быстро исчезают, старался медленнее моргать))

[@maxgraph]

Мне казалось на монтаже, что медленнее - слишком медленно)) так что тут скорее вкусовщина..но учту на будущее) спасибо

[@sencorio]

@@maxgraph Наверно не совсем в тему, но все-таки.. Есть на сайте блок с изображениями. Нужно, чтоб по клику по любой картинке они открывались на весь экран (или очень крупно) и включался слайдер. Ну либо попеременно перещелкивать картинки для их увеличения. Как называется такой интерактив, может есть отдельный модуль, планируется ли на канале рассказ про такое?

[@maxgraph]

@@sencorio да, будет)

[@user-xt1ns1br7o]

Если свайпер является flex-элементом или является самим Flex-контайнер, нужно на контейнер прописывать, min-width: 0; И когда слайдер находится в табах, тоже может глючить.

[@maxgraph]

Не сталкивался, но ок)

[@svet0v]

45:00 - сделай видео по слайдеру с горизонтальным превью, с меня лайк и подписка и колокольчик) Спасибо за это видео

[@maxgraph]

В планах лежит)

[@user-cd6gu6ig1j]

Я испытал оргазм. Месяц я возился в поиске универсального слайдера на чистом JS, и столько раз стрелял себе в ногу, что вспоминать не хочется. А тут за час с лишним разбор всех кейсов, что мне встречались, и все на чистом JS. Ты слёту получаешь подписку, колокольчик и огромную благодарность!

[@maxgraph]

Спасибо! Рад помочь) Добро пожаловать :)

[@yaroslavbox1249]

cool !

[@talivel118]

Классно было бы если ты поставил бы картинки в слайды, так понятней мне кажется..

[@user-pv2bk9mm4h]

Мааааакс, спасибо большое за информацию). Подскажи, ты всетаки записал видео с вертикальным слайдом или нет, очень нужен)

[@maxgraph]

Да, было уже) возможно в ui компонентах

[@serhiirodik1116]

Подписка )

[@maxgraph]

Спасибо :)

[@toplemon8045]

Вместо события resize можно использовать функцию Matchmedia, несраванимо более производительна плюс больше читаемость и гибкость

[@Gerlinda137]

Здравствуйте, благодаря вам уже в трех проектах использовала этот плагин. Но каждый раз, когда хочу сделать слайдер со slidesPerView: auto все время одна и та же проблема, не прокручивается нормально вправо. Голову всю сломала, не знаю, как справиться.

[@whatisloveel]

спасибо

[@maxgraph]

Пожалуйста)

[@seryozhamangushev9638]

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

[@antonchehov8693]

Расскажите пожалуйста как внутри слайдеров ставить тексты а также кнопки

[@dexterdragons]

hey, gallery filterable prev, next & pagination?

[@Dim_Dimych21]

Спасибо за урок. Впервые решил использовать swiper в верстке макета и столкнулся с проблемой. Есть табы написаны на js, в которых есть слайдеры. При переключении на таб, который ещё ни разу не открывался после загрузки страницы , то внутри слайдер не начинает работать пока не свайпнешь его мышкой. В консоле просто у класса swiper slide отсутствуют классы active и next. Потом слайдер оживает и уже работает, если даже переключить таб. Даже функция observer не помогает до конца. Без неё вообще слайдер не работает. Вот спасибо на метод update. Думаю повесить его на кнопку таба и при переключении табов он и будет пробуждать слайдеры. А так уже 2й день голову ломаю в чем мог ошибиться при написании кода.

[@maxgraph]

ни в чем ошибки нет, просто внутри табов (пока блок скрыт) слайдер не может рассчитать размеры из ничего. Поэтому и нужен update()

[@Dim_Dimych21]

@@maxgraph Получилось, работает! Еще раз спасибо! )

[@pavel7650]

Столкнулся с такой проблемой. Свайпер очень плохо работает с брейкпоинтами. Например, выставляешь на определенной ширине slidesPerView или centeredSlides и при изменении размеров экрана в инспекторе количество слайдов не меняется, а меняется только после перезагрузки страницы. Как можно пофиксить?

[@anatolyannenko1821]

когда блок превращается в слайдер ошибка есть как мне кажется. Я делал window.innerWidth

[@volklin]

Спасибо за видео ! А можно ли сделать отложенную подгрузку картинок, если картинки лежат с разными размерами в ?

[@maxgraph]

Даже не пробовал

[@vitaliisyvashchenko7641]

а как реализовать при помощи событий эффект когда при свайпе или нажатии на кнопку перехода слайда идет задержка перелистывания и сначала "уплывают буквы", а потом уже перелистывается картинка слайда...?

[@maxgraph]

Тут можно на css постараться, через транзишн.

[@user-rz5zv1ms9y]

Спасибо огромное. Подскажите, пожалуйста. Возможно ли позиционировать кнопки навигации относительно активного слайда? Например, на экране отображается одна полная картинка, а prev и next слайды чуть видны. Нужно расположить кнопки навигации относительно краев центральной картинки.

[@maxgraph]

Можно

[@user-bt5uv7qg7i]

Поставил данный слайдер в блок на сайте. Дойдя до адаптива понял, что swiper полная хрень, удалил и переделал на slick. За видео большое спасибо, всё подробно и без воды. Может, когда-то, и swiper пригодиться.

[@maxgraph]

А что с ним не так?)

[@miraigrafit7865]

Как сделать вертикальный слайдер высота которого равняется высоте контента слайда? Чтобы при изменении контента (к примеру, добавили больше текста) слайдер увеличивался по высоте, а то swiper везде пишет фикс. высоту и при добавлении все обрезается...

[@maxgraph]

надо пробовать) так наугад не знаю

[@artmertehin1529]

Спасибо вам за видео. Может сталкивались, как сделать, чтобы вертикальный полноэкранный слайдер становился freemode после последнего слайда и возвращался в freemode false, если скроллим опять вверх? есть событие reachEnd, на него можно подвязать freemode true. А как быть с возвращением к freemode false?

[@maxgraph]

даже не пробовал)

[@sergius_yo]

Всё супер!! Пересмотрел видео несколько раз:) У меня такая ситуация. Всё работает, но уменьшении размера экрана, проверка на адаптивность, стрелки свайпера не доходят до первого брейкпоинта (1200рх) . Т.е. кнопка next не помещается в контейнер и появляется вертикальный скролл справа. Это начинается где-то с 1230рх. В чём может быть проблема? Кнопки вынесены за пределы свайпер контейнера

[@user-wl5jq2mx7d]

Привет Максим, у слайдера fotorama есть возможность по нажатию на кнопку перейти в полноэкранный режим, как это сделать на этом слайдере?

[@maxgraph]

Думаю только другой библиотекой

[@user-wc9kq3mi4o]

Здравствуйте! у меня перестаёт работать автоплей при смене направления. Да и сами кнопки работают через клик через два

[@maxgraph]

Здравствуйте Это странно, но возможно смена направления действительно ломает эти функции

[@user-om4bq8uf1s]

кстати, слайдер Tiny Slider идеально работает в режиме вертикального слайдера. подстраивается под высоту каждого слайда

[@maxgraph]

Надо посмотреть)

[@andrew_tt]

Хм, никак не могу понять, почему не работает в моем случае swiper.update(). Нажимаю button, display меняется на block, слайдер появляется, но анимированного обновления в инструментах разработчика как на видео 53:39, так и не происходит - анимируется только display. В чем может быть причина, почему может не работать swiper.update()?

[@SegenAlexander]

спасибо, отлично показал все) было полезно) А подскажи, как сделать, чтобы в реализации с 3 слайдами, где средний на первом плане, сделать такое переключение/перелистывание, без стрелок, чтобы на каждый свайп было переключение на следующий слайд, и нельзя было перескочить через несколько. В том, что ты показал, можно зажать ЛКМ и перетянуть с 2 на 8 к примеру слайд... (в твоем видео это 7 слайдер)

[@maxgraph]

насчет свайпа не скажу, а насчет плана - можно по классу swiper-slide-active его менять. трансформ добавлять и т.д.

[@example6963]

Здравствуйте, а как показать порядковый номер слайда? Допустим есть 5 слайдов и их порядковые номера, при нажатии на которые открывается тот или иной слайд. Узнал что это один из способов пагинации, но все же как это можно сделать?

[@maxgraph]

Здравствуйте, если вас надо 1 из 5, то это есть в видео. А если просто номер слайда - можно смотреть на специальное событие (не помню точно название, ибо с телефона, вроде slideChange), и передавать в функцию индекс. Если не разберетесь пишите

[@example6963]

@@maxgraph нашел в документации вроде, чтобы это сделать нужен этот код var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ''; }, }, }); Спасибо!)

[@user-dx5dx4wv8f]

скиньте плизз сюда ссылку на локальные файлы для Swiper ))

[@darkstyle7000]

Подскажите пожалуйста, как добавить ещё слайдеры в эту функцию, чтобы на мобилке блоки становились слайдером

[@maxgraph]

Да точно также как и остальные

[@Alexandr_16kz_22rus]

Дружище, огромная благодарность за ролик!!! Но есть вопрос: можно ли сделать слайдер, например, в два ряда по три слайда?

[@maxgraph]

Пожалуйста =) Да, конечно можно, есть настройка grid

[@anita_suska]

а у же есть видео со слайдером в нижнем углу экрана? очень нужно. расскажи сэнсей

[@kras9763]

Здравствуйте, большое спасибо за видео, долго искал подобное. Но остался один вопрос. Как, например, в одном слайдере класс swiper-pagination-current сделать белым, а во втором этот же класс черным. Хотел дополнительный класс дописать, но в самой разметке такой строки нет, только через devtools видно. И получается, что двигаю в одном слайдере, двигается и во втором...

[@maxgraph]

Через вложенность классов можно же. Типа .class .swiper-pagination-current

[@kras9763]

@@maxgraph Спасибо, как обычно в трёх соснах заблудился)

[@user-fh7uq3jy5o]

а все классы, которые прописаны в документации, обязательны? Я имею ввиду wrapper, slide и тд?

[@maxgraph]

Да

[@nitron080]

А можно сделать на нем список кнопок просто слова в колонку а справа от них картинка которая переключается когда кликаешь по словам?

[@maxgraph]

Да можно)

[@Eeegyfddgjjiii]

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

[@maxgraph]

Ну тут смотреть надо, сложно угадать

[@kuznetsovs]

Добрый день! Всё работает прекрасно, до той поры, пока не продублируешь слайдер, т.е. пока на странице один слайдер, всё работает прекрасно. Но всё ломается, если разместить несколько слайдеров. Подскажите пожалуйста, как сделать тоже самое, но с несколькими слайдерами на странице? Пробовал forEach перебирать все слайдеры. При ресайзе окна, точнее при уменьшении, всё работает, но при увеличении ругается на destroy(), соответственное обратно не срабатывает.

[@maxgraph]

Добрый вечер! Ну по сути надо дублировать код и просто называть переменные иначе. Но я наверное сделаю на эту тему отдельное видео

[@user-wc9kq3mi4o]

Подскажите пожалуйста, а как при событии slideChange добавлять анимацию, которая будет плавно отображать нужный блок с текстом?

[@maxgraph]

Я пока не очень понял задачу, вам нужно изменить анимацию слайдера? сделать не прокрутку, а что-то другое?

[@user-uv1dt7eo1c]

Возможно тебе надо fade?