Слайдер SWIPER. Подробный курс. Подключение настройка примеры.
HTML-код
- Опубликовано: 6 июн 2024
- Слайдер SWIPER. Подробный курс. Почему Swiper лучший слайдер для сайта? Начнем с того, что Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. А также он очень, очень, очень мощный и поможет справится с огромным кол-вом различных задач! Конечно же, все основные возможности слайдера Свайпер я покажу на практике, включая различные интересные решения и лайвхаки. Для этого я создал новый проект, состоящий из HTML CSS и JS файлов. И, прежде всего, нам нужно подключить слайдер Swiper к нашему проекту.
👉Материалы из видео: / 43991937
Ссылки слайдера Swiper:
👉Сайт: swiperjs.com
👉Демо: swiperjs.com/demos/
👉Скачать: unpkg.com/browse/swiper@6.3.5/
👉API: swiperjs.com/api/
👉StackOverflow: stackoverflow.com/questions/t...
Полезные уроки:
👉Адаптивная верстка: • Адаптивная вёрстка сай...
👉Верстка картинок: • Адаптивные изображения...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - Про слайдер Swiper
00:22 - Подключение слайдера Swiper
02:02 - HTML-конструкция слайдера Swiper
03:07 - Запуск (инициализация) слайдера Swiper
05:16 - Частые проблемы при запуске Swiper (флекс, табы)
06:09 - Подготовка к настройке Swiper
06:33 - Вывод стрелок
07:54 - Буллеты
09:47 - Фракции (текущий слайд из..)
10:34 - Прогрессбар
11:10 - Скролл
12:21 - Перетаскивание/Свайп
13:41 - Клик на слайд
13:56 - Хеш
14:44 - Клавиатура
15:43 - Колесо мыши
16:41 - Автовысота
17:28 - Кол-во слайдов для показа
20:23 - Отступ между слайдами
20:50 - Кол-во слайдов для прокрутки
21:16 - Слайд по центру
21:57 - RTL
22:28 - Стартовый слайд
22:57 - Мультирядность
24:29 - Бесконечность
25:38 - Свободный режим
26:22 - Автопрокрутка
27:49 - Скорость прокрутки
28:11 - Вертикальный слайдер
29:21 - Эффект Slide
29:37 - Эффект Fade
30:14 - Эффект Flip
30:46 - Эффект 3D Cube
31:16 - Эффект Coverflow
31:54 - Адаптивность (Брейкоинты)
33:47 - Lazy Loading
35:52 - Zoom картинок
36:43 - Thumbs (превью, миниатюры)
37:55 - Множество одинаковых слайдеров
38:28 - Слайдер в слайдере
39:43 - Передача управления другому слайдеру
41:31 - Обновление слайдера
42:24 - Параллакс эффект
44:02 - Виртуальные слайды
45:12 - Доступность (Accessibility)
45:35 - Методы, параметры, события. Примеры.
49:29 - Важные ссылки. Дополнительная информация.
50:09 - Напутствие
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
👋 Узнали что-то новое? Напишите об этом!
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Давай видос про слайдер и параллакс
да, хотел бы увидеть урок по навигационному меню с параллаксом
Жека есть возможность изменить внешний вид каждого булита??
Відео топ, але я так і не зрозумів реалізацію появи і зникнення слайдеру при динамічній зміні розміру екрана браузера
Спасибо за очень хороший подробный обзор. Одно маленькое замечание: 24 августа разработчики выпустили обновление, в котором, кроме всего прочего, класс swiper-container переименовали в swiper. У меня в результате сломался свайпер, так как подключен был через ссылки на сервер разработчика. Разобрался в чём дело, исправил, заработало. Отсюда вывод: ещё один аргумент в пользу того, чтобы скачивать файлы стилей и скриптов, и подключать их локально. Разработчики, как видим, увы не гарантируют обратной совместимости при обновлениях.
спасибо что я прочитал этот комментарий
Добавлю, где это можно посмотреть, может, как раз пригодится тем, кто использует уже 7 версию.
После того, как нажали Get Started на сайте разработчиков, обратите внимание на строчку вверху страницы, выделенную красным, там написано "If you are upgrading from Swiper 6 to Swiper 7, check out Migration Guide to Swiper 7".
В новой версии свайпера некоторые штуки (к примеру, та же мультистрочность, свободный режим, или, как выше написали про контейнер) уже реализуются по-другому, и там по ссылке сможете посмотреть, что на что поменялось.
А Жене огромное спасибо за все, что он делает!!! Учитель с большой буквы!
В CDN можно конкретную версию поставить и всё будет работать нормально, без скачивания локально.
целый час колупал код, гугл . крутил вертел. Надо было сразу почитать коменты ))))
Огонь все заработало можно дальше смотреть )
@@user-bh8us9oc3o 2 с половиной часа я пытался разобраться что не так, но в комменты пришёл уже как разобрался:)
Кладезь знаний и новшеств каждое видео канала! Мега круто! И +1 голос за видео про calc() по возмонжности)) Большое спасибо! С первой до последней минуты лучший учебный материал!
Евгений, спасибо большое за ваш труд, ваши ролики помогают до сих пор людям и еще будут помогать. Мира вам!
Жека, ты очень крутой парень. Такое чувство что я знаю тебя с детства и ты мой давний товарищ. Особенно твоя манера беседы. Спасибо за уроки - с тобой развитие становится комфортным!
Я рад!
Каждый раз, когда у Жеки выходит новый видос, мир становится чуточку лучше)
Спасибо! Я рад что полезно!
Мучался,мучался с этими скроллами на простом Js/jquery. Не первый раз вас смотрю и не первый раз удивляюсь! Классная подача урока. Желаю огромного продвижения,спасибо!))
Один из лучших твоих видосов между прочим, получился)
Очень круто рассказал и поработал. Этого урока очень нам не хватало. Ты сейчас реально сделал нашу жизнь лучше.
Стоя аплодирую тебе. А разработчикам слайдера респект за слайдер и подзатыльник что сами не сделали такой видос, а просто вывалили всю инфу, мол сами разбирайтесь. Начинающий верстальшик хрен когда разберется с этим, а ты нам помог.
Я рад что полезно!
Ура! Спасибо! Очень полезный контент, качество моей верстки улучшается с каждым твоим видео )
Я рад!
Только сегодня открыл для себя этот слайдер, а тут прямо в руки падает твой обзор. Это божественно!
Я рад!
Жека, премного благодарен за данную работу! Часто пользуюсь свайпером и когда возникает какая-нибудь проблема - обращаюсь к данному видео, ну оооочеень полезный видеоурок, благодарю!!!!
Урок по навигационному меню с параллаксом и видео про свойство Calc() однозначно ждём!!!!) И спасибо за проделанную работу!!!! Очень крутой выпуск!!!!
Вот только начал задаваться вопросом, как же настроить слайдер свайпер, и тут вышел видос. Спасибо огромное )
Очень круто, как всегда! Подробно, понятно, воодушевляюще!
Про плагины галерей с удовольствием послушаю! И ещё хотелось бы про кастомный скролл, как туда всякие циферки выезжающие вставлять, картинки и прочее.
да, хотел бы увидеть урок по навигационному меню с параллаксом
Огромное спасибо! Я не перестаю удивляться тому, как ты запариваешься над созданием контента! Слайдер действительно очень функциональный и удобный, лучше, чем slick. Еще раз спасибо, жду уроки по другим темам. Удачи!
Пожалуйста!
Ставлю лайк авансом ! У фрилансера самый качественный контент !
Спасибо!
+++
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Боже, це якесь диво а не слайдер! Я досі в шоці після перегляду, безмірно радий, що натрапив на це відео! Женя, дякую Вам за детальний огляд!
Какой же ты молодец! Все понятно и очень интересно рассказано. Всех благ тебе, благодарю за труд.
Спасибо большое, Евгений. Доступно объяснять сложные вещи - это талант и у вас он, определенно, есть. Ваш канал просто находка для начинающих. Успехов вам!
Вот бы ещё показывал весь код примеров, как правило около четверти функций на подобных видео не работает.
"о відос на 50хвилин, круто" подумав я і витратив день шоб розібрати і повторити 3/4 частини цього шедеврального навчального відео!
Чудовий матеріал!
Дякую за твої старання!
у меня просто нет слов, мне очень помогает ваш контент!!! огромное спасибо за такую проделанную работу!!!
Благодарность этому человеку низкий поклон!!!!Евгений жму руку спасибо!!!PERFECT!
Женя, это пушка! посмотрел пока половину и мне уже очень нравятся возможности этого слайдера !
Отлично!
Я ставил слайдер, но ты показал очень много новых фишек, в частности настройки под себя.) Спасибо 👍
Я рад что полезно!
Братишка, какой же ты крутой! Мучался 6 часов, не мог понять почему не правильно идет подсчет слайдеров в пагинации.... Посмотрел твой ролик и все ясно как белый день. Спасибо за твой труд!
Наконец я дошел до слайдеров и как всегда на помощь пришел высококачественный видос от Жеки, очередной раз большое спасибо!
Господи жека, столько времени искал что бы исправить штуку при переключении на табах, а тут оказывается просто обновления слайдера надо было) плоохо искал значит) Просто лучший!
Да, видос со слайдером страницей, параллаксом и прочим нужен!
Жек каждый раз возвращаюсь к твоим крутым видосам и нахожу решения своих задач спасибо тебе огромное за труд!!
Очень вовремя вышел этот ролик) Вас рекомендуют учителя к просмотру, как дополнительный материал, в онлайн школе))) Одна из топ 3 онлайн коробок)))
Спасибо)
Сколько смотрю твои видео, харизма так и прёт. Твоя подача просто на другом уровне, в отличие от остальных. Спасибо большое за видео!
Я рад, пожалуйста!
Классный урок! Слайдер прямо действительно очень мощный! Спасибо, Женя)
Пожалуйста!
Большое спасибо за урок, некоторые фишки не мог понять как работают, теперь всё стало на свои места!
Замечательно! Скролл страницы слайдером и с меню нужен обязательно!!!!
Понял, сделаю
Жека Вы очень крутой дядя! Спасибо за Ваш труд! Пусть у вас и у ваших близких всё будет хорошо 🤲🏻
Да, нам очень-очень нужны все твои видео! В частности про поэкранную прокрутку и calc!;)))))
Я рад!)
Ого уже новый видео. Плюс ещё один отличный контенд на ЮТУБ. Удачи😎
Замечательный ролик! Хоть уже давно работаю со слайдерами, но много нового узнал из этого видео, спасибо!)
Отличное обучающее видео. как раз пользуюсь этим слайдером. Спасибо вам, Евгений Андриканич :) Вы очень помогаете своими роликами.
Пожалуйста! Я рад!
Супер, класс, здорово восхищаюсь вашей версткой!!!!!!!
Не, ну это однозначно годнота! Как и всё на канале! Вот, что значит, когда делают от души!
Балдеееежный выпуск! С нетерпением ждём следующий
Крутая вещь! Спасибо за подробное объяснение!
Чем дальше, тем круче! Спасибо!!! ;-) Уроки по calc - это бы было здорово! Очень интересная штука!
Пожалуйста!
Це мега крутий випуск! Велика дяка) Розжував так, що і питань нема) Свайпер та попап цікаво було б побачити!)
Спасибо за курс по swiper. Все перепробовал ничего не работало, как только подписался на канал, о магия все заработало;)
Ахах) Это правда!
Жека, большое спасибо. Как всегда ты даешь своевременный, необходимый, практичный контент. С удовольствием лайк видосу.
Я рад!
Жека, ты крутой! )) Так офигенно разжевал про слайдер! Огромное тебе спасибо!
Дякую!!! Дуже детальна подача інформації! Головне, уважно слідкувати і повторювати.
Как раз довёрстываю сайт девушке к ДР, и пришло время именно слайдера, ну и как всегда твои уроки и инфа вовремя)
Большое спасибо за ваш труд и позитив!
Огроменное спасибо за такой подробный и классный разбор
ОГРОМНОЕ СПАСИБИЩЕ за такой подробный урок
Спасибо огромное! В интернете не так уж и просто найти swiper на чистом JS. Респект!
Нашёл этот слайдер буквально 2 дня назад, очень понравился своей простотой и функциональностью, как раз делаю сайт друзьям сверстал все кроме слайдера ) а тут твое видео выходит это прям знак свыше спасибо за видео ну и лайк конечно
Спасибо, я рад!
Супер! Класс! ОТЛИЧНО)) качественный контент, как всегда
Спасибо!
Евгений - огромная вам благодарность! ❤
Все четко, понятно, интересно и полезно! Благодарю!
Плагины галереи и поэкранная прокрутка очень интересны)
Я рад!
Молодца, с удовольствие посмотрел, хороший контент, доступная подача!!!
Спасибо, я рад!
Очень интересно было бы посмотреть как сделать слайдер на всю страницу с параллакс эффектом))) А за видео спасибо, очень информативно и развёрнуто! Лайк!
Ок, сделаю!
@@FreelancerLifeStyle очень прям ждем!
Круто! Вчера только о нём узнал, а тут видео с его полнейшим разбором!
Я рад!
Блокбастер по Swiper. Однозначно! С тайм кодами вообще СУПЕР!
Я рад!
Дякую за відео!!! Як завжди на висоті!
Реално дуже гибка штука, ще й на чистому JS 💪
Офигенный туториал! Спасибо!
Очень полезный видеоурок. Спасибо!
Самое полезное и интересное видео, которое я видела за последнее время! Спасибо огромное!)
Пожалуйста!
Спасибо огромное за видео, оно спасло мои нервы и подняло настроение, благодаря вам у меня заработало всё! Еще раз спасибо.
Вот большущее спасибо и плюс в карму. Отличное видео и обзор.
Выполняю "таски" по твоим урокам, спасибо тебе!!!))))
Отличный урок! Спасибо, дружище!
Очень помог с обновлением слайдера! Не мог сделать слайдер в табах, спасибо большое!
Максимально понятно объяснил. Спасибо, прям то что нужно!
Евгений, спасибо Вам БОЛЬШОЕ!!!!
Ваш позитив заразителен)👍
Я рад!
О, где ты был 2 месяца назад))) шикарный слайдер
Уверен, в видео все равно много нового :)
Божественно! Мир стал чуточку лучше)
хороший урок. Спасибо! Про переменные css и гриды интересно от тебя послушать
Гриды тут ruclips.net/p/PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm
Супер полезный урок! Огромное спасибо!!!
Спасибо за классный урок. Ждем видос про поэкранную прокрутку с параллаксом и прочим.
Ждем видео про свойство Calc() и другие функции css))
Понял)
А зачем видео про calc ? Это же элементарная функция, не?
@@dmitrykon8606 кому как
Вышел видосик у Жеки- палец сам тянется на лайк. Спасибо за контент)
Пожалуйста!
Лайк не глядя, Жека, спасибо!)
Ребята Евгений это мега человек! Женя спасибо!
Большое спасибо!!! Очень помог. Всё предельно ясно
Спасибо Евгений, очень подробно изложил. Теперь надо выучить))
Пожалуйста!
супер офигенно, обожаю этот канал
Спасибо большое за видео! Качественно и полезно!
Как же вовремя, мне как раз кинули линк на сайт Свайпер и я не понимал что к чему.
И тут обзор
Спасибо!
Очень круто))) Спасибо что все подробно рассказал)) твое видео очень помогло разобраться с этой библиотекой)) Ты крутой!!)
Круто, лайк не глядя.
Спасибо!
Как раз решил взяться за изучение слайдеров. А тут смотрю, у тебя как раз подходящий видос подъехал)) Читаешь мысли, короче!)Как всегда, всё качественно и понятно! Спасибо! Запили урок по нав меню с параллаксом!
Такой урок уже на канале
Спасибо Женя. Ты очень хороший человек и ты мой друг 🙂
Спасибо!
Большое спасибо, сегодня как раз появилась необходимость сделать слайдер.
Я рад!
очень благодарен, автору процветания и большой респект
Ты великолепен, спасибо огромное за то, что очень понятно и бесплатно предоставляешь огромную кучу полезной информации
Спасибо!
Классный видос по слайдеру. Очень нравиться этот слайдер, чувствую, что он проще в инициализации, чем СликСлайдер. Топ примеры. С паралаксом ваще огонь! Можно задуматься над применением слайдера без подключения GreenSocks
Всегда ставлю лайк, когда в видео встречаю полезную для меня информацию. В этот раз, первое было - это фикс с помощию min-width: 0;
Раньше изголялся с помощью overflow: hidden; (флекс контейнету, ну лили элементу). Твой вариант будет правельнее. Спасибо!
Я рад!
Бомбический обзор слайдера.
Спасибо.
Пожалуйста!