Слайдер SWIPER. Подробный курс. Подключение настройка примеры.
Вставка
- Опубліковано 4 чер 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() по возмонжности)) Большое спасибо! С первой до последней минуты лучший учебный материал!
Ура! Спасибо! Очень полезный контент, качество моей верстки улучшается с каждым твоим видео )
Я рад!
Евгений, спасибо большое за ваш труд, ваши ролики помогают до сих пор людям и еще будут помогать. Мира вам!
Очень круто, как всегда! Подробно, понятно, воодушевляюще!
Про плагины галерей с удовольствием послушаю! И ещё хотелось бы про кастомный скролл, как туда всякие циферки выезжающие вставлять, картинки и прочее.
Урок по навигационному меню с параллаксом и видео про свойство Calc() однозначно ждём!!!!) И спасибо за проделанную работу!!!! Очень крутой выпуск!!!!
Жека, ты очень крутой парень. Такое чувство что я знаю тебя с детства и ты мой давний товарищ. Особенно твоя манера беседы. Спасибо за уроки - с тобой развитие становится комфортным!
Я рад!
На фразе' я тут сделал простую html структуру' у меня задёргался глаз и из него потекла слеза.
Только сегодня открыл для себя этот слайдер, а тут прямо в руки падает твой обзор. Это божественно!
Я рад!
Мучался,мучался с этими скроллами на простом Js/jquery. Не первый раз вас смотрю и не первый раз удивляюсь! Классная подача урока. Желаю огромного продвижения,спасибо!))
Сначала подумал, что сноской: "Как вам, олени?" Жека интересуется у нас качеством предоставленного контента и только потом взгляд попал на свитер)))
Я тоже почему-то мысленно поставила запятую перед "олени"))
Благодарность этому человеку низкий поклон!!!!Евгений жму руку спасибо!!!PERFECT!
Замечательно! Скролл страницы слайдером и с меню нужен обязательно!!!!
Понял, сделаю
Огромное спасибо! Я не перестаю удивляться тому, как ты запариваешься над созданием контента! Слайдер действительно очень функциональный и удобный, лучше, чем slick. Еще раз спасибо, жду уроки по другим темам. Удачи!
Пожалуйста!
Женя, это пушка! посмотрел пока половину и мне уже очень нравятся возможности этого слайдера !
Отлично!
Какой же ты молодец! Все понятно и очень интересно рассказано. Всех благ тебе, благодарю за труд.
Вот только начал задаваться вопросом, как же настроить слайдер свайпер, и тут вышел видос. Спасибо огромное )
у меня просто нет слов, мне очень помогает ваш контент!!! огромное спасибо за такую проделанную работу!!!
Один из лучших твоих видосов между прочим, получился)
Очень круто рассказал и поработал. Этого урока очень нам не хватало. Ты сейчас реально сделал нашу жизнь лучше.
Стоя аплодирую тебе. А разработчикам слайдера респект за слайдер и подзатыльник что сами не сделали такой видос, а просто вывалили всю инфу, мол сами разбирайтесь. Начинающий верстальшик хрен когда разберется с этим, а ты нам помог.
Я рад что полезно!
Жека, премного благодарен за данную работу! Часто пользуюсь свайпером и когда возникает какая-нибудь проблема - обращаюсь к данному видео, ну оооочеень полезный видеоурок, благодарю!!!!
Я ставил слайдер, но ты показал очень много новых фишек, в частности настройки под себя.) Спасибо 👍
Я рад что полезно!
Ждем видео про свойство Calc() и другие функции css))
Понял)
А зачем видео про calc ? Это же элементарная функция, не?
@@dmitrykon8606 кому как
Крутая вещь! Спасибо за подробное объяснение!
Большое спасибо за ваш труд и позитив!
Да, нам очень-очень нужны все твои видео! В частности про поэкранную прокрутку и calc!;)))))
Я рад!)
Жек каждый раз возвращаюсь к твоим крутым видосам и нахожу решения своих задач спасибо тебе огромное за труд!!
Спасибо большое, Евгений. Доступно объяснять сложные вещи - это талант и у вас он, определенно, есть. Ваш канал просто находка для начинающих. Успехов вам!
Вот бы ещё показывал весь код примеров, как правило около четверти функций на подобных видео не работает.
Супер, класс, здорово восхищаюсь вашей версткой!!!!!!!
Балдеееежный выпуск! С нетерпением ждём следующий
Классный урок! Слайдер прямо действительно очень мощный! Спасибо, Женя)
Пожалуйста!
Евгений - огромная вам благодарность! ❤
ОГРОМНОЕ СПАСИБИЩЕ за такой подробный урок
Огроменное спасибо за такой подробный и классный разбор
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Большое спасибо за урок, некоторые фишки не мог понять как работают, теперь всё стало на свои места!
Не, ну это однозначно годнота! Как и всё на канале! Вот, что значит, когда делают от души!
Жека, большое спасибо. Как всегда ты даешь своевременный, необходимый, практичный контент. С удовольствием лайк видосу.
Я рад!
Ого уже новый видео. Плюс ещё один отличный контенд на ЮТУБ. Удачи😎
Замечательный ролик! Хоть уже давно работаю со слайдерами, но много нового узнал из этого видео, спасибо!)
Евгений, спасибо Вам БОЛЬШОЕ!!!!
Чем дальше, тем круче! Спасибо!!! ;-) Уроки по calc - это бы было здорово! Очень интересная штука!
Пожалуйста!
Наконец я дошел до слайдеров и как всегда на помощь пришел высококачественный видос от Жеки, очередной раз большое спасибо!
Круто! Вчера только о нём узнал, а тут видео с его полнейшим разбором!
Я рад!
Офигенный туториал! Спасибо!
Спасибо огромное! В интернете не так уж и просто найти swiper на чистом JS. Респект!
Отличное обучающее видео. как раз пользуюсь этим слайдером. Спасибо вам, Евгений Андриканич :) Вы очень помогаете своими роликами.
Пожалуйста! Я рад!
Жека, ты крутой! )) Так офигенно разжевал про слайдер! Огромное тебе спасибо!
Отличный урок! Спасибо, дружище!
Супер! Класс! ОТЛИЧНО)) качественный контент, как всегда
Спасибо!
Братишка, какой же ты крутой! Мучался 6 часов, не мог понять почему не правильно идет подсчет слайдеров в пагинации.... Посмотрел твой ролик и все ясно как белый день. Спасибо за твой труд!
Боже, це якесь диво а не слайдер! Я досі в шоці після перегляду, безмірно радий, що натрапив на це відео! Женя, дякую Вам за детальний огляд!
Максимально понятно объяснил. Спасибо, прям то что нужно!
Очень полезный видеоурок. Спасибо!
Господи жека, столько времени искал что бы исправить штуку при переключении на табах, а тут оказывается просто обновления слайдера надо было) плоохо искал значит) Просто лучший!
Супер полезный урок! Огромное спасибо!!!
Большое спасибо!!! Очень помог. Всё предельно ясно
Молодца, с удовольствие посмотрел, хороший контент, доступная подача!!!
Спасибо, я рад!
"о відос на 50хвилин, круто" подумав я і витратив день шоб розібрати і повторити 3/4 частини цього шедеврального навчального відео!
Чудовий матеріал!
Дякую за твої старання!
Спасибо большое за видео! Качественно и полезно!
Вот большущее спасибо и плюс в карму. Отличное видео и обзор.
Очень интересно было бы посмотреть как сделать слайдер на всю страницу с параллакс эффектом))) А за видео спасибо, очень информативно и развёрнуто! Лайк!
Ок, сделаю!
@@FreelancerLifeStyle очень прям ждем!
Жека Вы очень крутой дядя! Спасибо за Ваш труд! Пусть у вас и у ваших близких всё будет хорошо 🤲🏻
хороший урок. Спасибо! Про переменные css и гриды интересно от тебя послушать
Гриды тут ua-cam.com/play/PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm.html
Все четко, понятно, интересно и полезно! Благодарю!
Плагины галереи и поэкранная прокрутка очень интересны)
Я рад!
Ваш позитив заразителен)👍
Я рад!
Дякую!!! Дуже детальна подача інформації! Головне, уважно слідкувати і повторювати.
Круто, лайк не глядя.
Спасибо!
О, где ты был 2 месяца назад))) шикарный слайдер
Уверен, в видео все равно много нового :)
Самое полезное и интересное видео, которое я видела за последнее время! Спасибо огромное!)
Пожалуйста!
Очень вовремя вышел этот ролик) Вас рекомендуют учителя к просмотру, как дополнительный материал, в онлайн школе))) Одна из топ 3 онлайн коробок)))
Спасибо)
Большое спасибо, сегодня как раз появилась необходимость сделать слайдер.
Я рад!
Спасибо большое за видео! Как раз то, что искал.
Я рад!
Очень помог с обновлением слайдера! Не мог сделать слайдер в табах, спасибо большое!
Сколько смотрю твои видео, харизма так и прёт. Твоя подача просто на другом уровне, в отличие от остальных. Спасибо большое за видео!
Я рад, пожалуйста!
Божественно! Мир стал чуточку лучше)
супер офигенно, обожаю этот канал
Спасибо Евгений, очень подробно изложил. Теперь надо выучить))
Пожалуйста!
Бомбический обзор слайдера.
Спасибо.
Пожалуйста!
Це мега крутий випуск! Велика дяка) Розжував так, що і питань нема) Свайпер та попап цікаво було б побачити!)
Всё четко и понятно! Спасибо!
Пожалуйста!
Блокбастер по Swiper. Однозначно! С тайм кодами вообще СУПЕР!
Я рад!
Спасибо за классный урок. Ждем видос про поэкранную прокрутку с параллаксом и прочим.
Вышел видосик у Жеки- палец сам тянется на лайк. Спасибо за контент)
Пожалуйста!
Нашёл этот слайдер буквально 2 дня назад, очень понравился своей простотой и функциональностью, как раз делаю сайт друзьям сверстал все кроме слайдера ) а тут твое видео выходит это прям знак свыше спасибо за видео ну и лайк конечно
Спасибо, я рад!
очень благодарен, автору процветания и большой респект
Дякую за відео!!! Як завжди на висоті!
Реално дуже гибка штука, ще й на чистому JS 💪
Здравствуйте! Благодарю Вас за видео!
Пожалуйста!
мужик красава , все коротко , ясно и о делу.
Классный видос. Оч информативно! Благодарю!!!
Выполняю "таски" по твоим урокам, спасибо тебе!!!))))
Ребята Евгений это мега человек! Женя спасибо!
Спасибо за курс по swiper. Все перепробовал ничего не работало, как только подписался на канал, о магия все заработало;)
Ахах) Это правда!
Очень крутое видео! Огромное спасибо!
Спасибо большое. Я че-то слегка в документации не выкупил момент один, и нашел тут.
Мир точно стал лучше))
Спасибо, Евгений))
Пожалуйста!