Слайдер SWIPER. Подробный курс. Подключение настройка примеры.

Слайдер 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
🤟 Живи, а работай в свободное время! ©

[@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

[@vladoprya5239]

Давай видос про слайдер и параллакс

[@user-wp3km5se9h]

да, хотел бы увидеть урок по навигационному меню с параллаксом

[@user-wp3km5se9h]

Жека есть возможность изменить внешний вид каждого булита??

[@Loveispanec]

Відео топ, але я так і не зрозумів реалізацію появи і зникнення слайдеру при динамічній зміні розміру екрана браузера

[@mefist0feld]

Спасибо за очень хороший подробный обзор. Одно маленькое замечание: 24 августа разработчики выпустили обновление, в котором, кроме всего прочего, класс swiper-container переименовали в swiper. У меня в результате сломался свайпер, так как подключен был через ссылки на сервер разработчика. Разобрался в чём дело, исправил, заработало. Отсюда вывод: ещё один аргумент в пользу того, чтобы скачивать файлы стилей и скриптов, и подключать их локально. Разработчики, как видим, увы не гарантируют обратной совместимости при обновлениях.

[@teizer1122]

спасибо что я прочитал этот комментарий

[@lanash1055]

Добавлю, где это можно посмотреть, может, как раз пригодится тем, кто использует уже 7 версию. После того, как нажали Get Started на сайте разработчиков, обратите внимание на строчку вверху страницы, выделенную красным, там написано "If you are upgrading from Swiper 6 to Swiper 7, check out Migration Guide to Swiper 7". В новой версии свайпера некоторые штуки (к примеру, та же мультистрочность, свободный режим, или, как выше написали про контейнер) уже реализуются по-другому, и там по ссылке сможете посмотреть, что на что поменялось. А Жене огромное спасибо за все, что он делает!!! Учитель с большой буквы!

[@pavel7650]

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

[@user-bh8us9oc3o]

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

[@bohdansherbak]

@@user-bh8us9oc3o 2 с половиной часа я пытался разобраться что не так, но в комменты пришёл уже как разобрался:)

[@aleksandraafanaseva3390]

Каждый раз, когда у Жеки выходит новый видос, мир становится чуточку лучше)

[@FreelancerLifeStyle]

Спасибо! Я рад что полезно!

[@aleshagalaxy]

Ставлю лайк авансом ! У фрилансера самый качественный контент !

[@FreelancerLifeStyle]

Спасибо!

[@Qwertyqwerty-tq3we]

+++

[@ilfin3568]

Евгений, спасибо большое за ваш труд, ваши ролики помогают до сих пор людям и еще будут помогать. Мира вам!

[@Frie666]

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

[@FreelancerLifeStyle]

Я рад!

[@user-sd6hp9xb7i]

Кладезь знаний и новшеств каждое видео канала! Мега круто! И +1 голос за видео про calc() по возмонжности)) Большое спасибо! С первой до последней минуты лучший учебный материал!

[@user-ug1vi3bv1f]

Жека, премного благодарен за данную работу! Часто пользуюсь свайпером и когда возникает какая-нибудь проблема - обращаюсь к данному видео, ну оооочеень полезный видеоурок, благодарю!!!!

[@aurocheg]

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

[@user-lu3ob5iw2t]

Мучался,мучался с этими скроллами на простом Js/jquery. Не первый раз вас смотрю и не первый раз удивляюсь! Классная подача урока. Желаю огромного продвижения,спасибо!))

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

[@user-oy9tn4gr9l]

у меня просто нет слов, мне очень помогает ваш контент!!! огромное спасибо за такую проделанную работу!!!

[@user-lu4rn4tm3v]

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

[@FreelancerLifeStyle]

Я рад!

[@mangixlaxdg8690]

Жека, ты очень крутой парень. Такое чувство что я знаю тебя с детства и ты мой давний товарищ. Особенно твоя манера беседы. Спасибо за уроки - с тобой развитие становится комфортным!

[@FreelancerLifeStyle]

Я рад!

[@user-gg4dv2rx2g]

Урок по навигационному меню с параллаксом и видео про свойство Calc() однозначно ждём!!!!) И спасибо за проделанную работу!!!! Очень крутой выпуск!!!!

[@user-rl7ly3cz6g]

Да, видос со слайдером страницей, параллаксом и прочим нужен!

[@yaavtor]

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

[@user-xc5er7qt9j]

Спасибо большое, Евгений. Доступно объяснять сложные вещи - это талант и у вас он, определенно, есть. Ваш канал просто находка для начинающих. Успехов вам!

[@ttcan6320]

Вот бы ещё показывал весь код примеров, как правило около четверти функций на подобных видео не работает.

[@user-rv2yz8ox4d]

Я ставил слайдер, но ты показал очень много новых фишек, в частности настройки под себя.) Спасибо 👍

[@FreelancerLifeStyle]

Я рад что полезно!

[@annamets]

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

[@kotlancer]

Женя, это пушка! посмотрел пока половину и мне уже очень нравятся возможности этого слайдера !

[@FreelancerLifeStyle]

Отлично!

[@user-sf7lz8fn4r]

да, хотел бы увидеть урок по навигационному меню с параллаксом

[@niceman5890]

Крутая вещь! Спасибо за подробное объяснение!

[@pitbrest]

Наконец я дошел до слайдеров и как всегда на помощь пришел высококачественный видос от Жеки, очередной раз большое спасибо!

[@user-ls4gp3ww4z]

Большое спасибо за урок, некоторые фишки не мог понять как работают, теперь всё стало на свои места!

[@user-bh7wi7ds4v]

Замечательно! Скролл страницы слайдером и с меню нужен обязательно!!!!

[@FreelancerLifeStyle]

Понял, сделаю

[@jasonborn4373]

Благодарность этому человеку низкий поклон!!!!Евгений жму руку спасибо!!!PERFECT!

[@alucardfarg]

Жек каждый раз возвращаюсь к твоим крутым видосам и нахожу решения своих задач спасибо тебе огромное за труд!!

[@deevue_sews]

Один из лучших твоих видосов между прочим, получился) Очень круто рассказал и поработал. Этого урока очень нам не хватало. Ты сейчас реально сделал нашу жизнь лучше. Стоя аплодирую тебе. А разработчикам слайдера респект за слайдер и подзатыльник что сами не сделали такой видос, а просто вывалили всю инфу, мол сами разбирайтесь. Начинающий верстальшик хрен когда разберется с этим, а ты нам помог.

[@FreelancerLifeStyle]

Я рад что полезно!

[@serhiikorniichuk865]

Замечательный ролик! Хоть уже давно работаю со слайдерами, но много нового узнал из этого видео, спасибо!)

[@gritsienkooleg3447]

Не, ну это однозначно годнота! Как и всё на канале! Вот, что значит, когда делают от души!

[@user-gp5zx6xu1r]

Боже, це якесь диво а не слайдер! Я досі в шоці після перегляду, безмірно радий, що натрапив на це відео! Женя, дякую Вам за детальний огляд!

[@user-rl3nm6yi1c]

Балдеееежный выпуск! С нетерпением ждём следующий

[@user-fw4ew8wf3b]

Большое спасибо за ваш труд и позитив!

[@antDgt]

Огроменное спасибо за такой подробный и классный разбор

[@user-ch4gd5sb7z]

Да, нам очень-очень нужны все твои видео! В частности про поэкранную прокрутку и calc!;)))))

[@FreelancerLifeStyle]

Я рад!)

[@stylelifeweb.wyndace]

Круто! Вчера только о нём узнал, а тут видео с его полнейшим разбором!

[@FreelancerLifeStyle]

Я рад!

[@Sephellone]

Максимально понятно объяснил. Спасибо, прям то что нужно!

[@user-bi7ev9nh6m]

ОГРОМНОЕ СПАСИБИЩЕ за такой подробный урок

[@user-vn1ho3gu5b]

Супер, класс, здорово восхищаюсь вашей версткой!!!!!!!

[@yurkaronin]

Отличное обучающее видео. как раз пользуюсь этим слайдером. Спасибо вам, Евгений Андриканич :) Вы очень помогаете своими роликами.

[@FreelancerLifeStyle]

Пожалуйста! Я рад!

[@crabsburger501]

Господи жека, столько времени искал что бы исправить штуку при переключении на табах, а тут оказывается просто обновления слайдера надо было) плоохо искал значит) Просто лучший!

[@Timyr48]

"о відос на 50хвилин, круто" подумав я і витратив день шоб розібрати і повторити 3/4 частини цього шедеврального навчального відео! Чудовий матеріал! Дякую за твої старання!

[@khalilmutallibov]

Огромное спасибо! Я не перестаю удивляться тому, как ты запариваешься над созданием контента! Слайдер действительно очень функциональный и удобный, лучше, чем slick. Еще раз спасибо, жду уроки по другим темам. Удачи!

[@FreelancerLifeStyle]

Пожалуйста!

[@VitaliiMaevskii]

Классный урок! Слайдер прямо действительно очень мощный! Спасибо, Женя)

[@FreelancerLifeStyle]

Пожалуйста!

[@sergeychernenko9883]

Спасибо огромное! В интернете не так уж и просто найти swiper на чистом JS. Респект!

[@takhirvalitov1492]

Жека Вы очень крутой дядя! Спасибо за Ваш труд! Пусть у вас и у ваших близких всё будет хорошо 🤲🏻

[@alexbulohov4462]

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

[@aleffflex9342]

Вот большущее спасибо и плюс в карму. Отличное видео и обзор.

[@annawillmann503]

Евгений - огромная вам благодарность! ❤

[@user-dk9bk8vf5o]

Большое спасибо!!! Очень помог. Всё предельно ясно

[@mvssss_]

Очень помог с обновлением слайдера! Не мог сделать слайдер в табах, спасибо большое!

[@placid3495]

Жека, ты крутой! )) Так офигенно разжевал про слайдер! Огромное тебе спасибо!

[@user-kj7xf4to9q]

Жека, большое спасибо. Как всегда ты даешь своевременный, необходимый, практичный контент. С удовольствием лайк видосу.

[@FreelancerLifeStyle]

Я рад!

[@user-sk1rh7yh7n]

Все четко, понятно, интересно и полезно! Благодарю! Плагины галереи и поэкранная прокрутка очень интересны)

[@FreelancerLifeStyle]

Я рад!

[@andrewstarcev]

Ждем видео про свойство Calc() и другие функции css))

[@FreelancerLifeStyle]

Понял)

[@dmitrykon8606]

А зачем видео про calc ? Это же элементарная функция, не?

[@danielfadeev]

@@dmitrykon8606 кому как

[@sotoros]

Очень полезный видеоурок. Спасибо!

[@sergeyplotnikov5031]

Офигенный туториал! Спасибо!

[@user-nq5rk4np6e]

Спасибо огромное за видео, оно спасло мои нервы и подняло настроение, благодаря вам у меня заработало всё! Еще раз спасибо.

[@user-rc6ye4jn3q]

Спасибо большое за видео! Как раз то, что искал.

[@FreelancerLifeStyle]

Я рад!

[@no_name_2mix]

Спасибо большое за видео! Качественно и полезно!

[@Ggg-lv3jh]

Дякую!!! Дуже детальна подача інформації! Головне, уважно слідкувати і повторювати.

[@MobileLegendsImmortal]

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

[@user-up9zq1nw4n]

Самое полезное и интересное видео, которое я видела за последнее время! Спасибо огромное!)

[@FreelancerLifeStyle]

Пожалуйста!

[@priceoftrue5817]

очень благодарен, автору процветания и большой респект

[@user-vn1ho3gu5b]

Молодца, с удовольствие посмотрел, хороший контент, доступная подача!!!

[@FreelancerLifeStyle]

Спасибо, я рад!

[@seregadanilov7253]

Супер! Класс! ОТЛИЧНО)) качественный контент, как всегда

[@FreelancerLifeStyle]

Спасибо!

[@hibiride]

Отличный урок! Спасибо, дружище!

[@victoriyaberg5304]

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

[@FreelancerLifeStyle]

Я рад, пожалуйста!

[@ivangusev8752]

Евгений, спасибо Вам БОЛЬШОЕ!!!!

[@user-xc2yo1kw4v]

Супер полезный урок! Огромное спасибо!!!

[@user-ze3tx9nq2o]

Большое спасибо, сегодня как раз появилась необходимость сделать слайдер.

[@FreelancerLifeStyle]

Я рад!

[@teslauzbekistan]

Ого уже новый видео. Плюс ещё один отличный контенд на ЮТУБ. Удачи😎

[@igorsazonovi3473]

Спасибо Евгений, очень подробно изложил. Теперь надо выучить))

[@FreelancerLifeStyle]

Пожалуйста!

[@lova4475]

Це мега крутий випуск! Велика дяка) Розжував так, що і питань нема) Свайпер та попап цікаво було б побачити!)

[@paradox-player]

Нашёл этот слайдер буквально 2 дня назад, очень понравился своей простотой и функциональностью, как раз делаю сайт друзьям сверстал все кроме слайдера ) а тут твое видео выходит это прям знак свыше спасибо за видео ну и лайк конечно

[@FreelancerLifeStyle]

Спасибо, я рад!

[@ups7write]

Блокбастер по Swiper. Однозначно! С тайм кодами вообще СУПЕР!

[@FreelancerLifeStyle]

Я рад!

[@user-ty7vx7xz5q]

Спасибо за классный урок. Ждем видос про поэкранную прокрутку с параллаксом и прочим.

[@yuriilukianovych8660]

Дякую за відео!!! Як завжди на висоті! Реално дуже гибка штука, ще й на чистому JS 💪

[@jiza2377]

Спасибо за курс по swiper. Все перепробовал ничего не работало, как только подписался на канал, о магия все заработало;)

[@FreelancerLifeStyle]

Ахах) Это правда!

[@rustyspc9046]

Вышел видосик у Жеки- палец сам тянется на лайк. Спасибо за контент)

[@FreelancerLifeStyle]

Пожалуйста!

[@jahongirbektemirov6516]

Спасибо Женя. Ты очень хороший человек и ты мой друг 🙂

[@FreelancerLifeStyle]

Спасибо!

[@user-mt6ju1sk4k]

супер офигенно, обожаю этот канал

[@ZPUA24]

Как раз довёрстываю сайт девушке к ДР, и пришло время именно слайдера, ну и как всегда твои уроки и инфа вовремя)

[@user-ub1eb6jr2m]

Круто, лайк не глядя.

[@FreelancerLifeStyle]

Спасибо!

[@biLLie_wiLLie]

хороший урок. Спасибо! Про переменные css и гриды интересно от тебя послушать

[@FreelancerLifeStyle]

Гриды тут kzbin.info/aero/PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm

[@tetianabronitska6688]

Классный видос. Оч информативно! Благодарю!!!

[@TheOrionMoran]

Спасибо большое. Я че-то слегка в документации не выкупил момент один, и нашел тут.

[@user-en4cc9jg5c]

Божественно! Мир стал чуточку лучше)

[@Rampaso]

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

[@osamudazay3295]

мужик красава , все коротко , ясно и о делу.

[@gzoomercom]

Просто огромное человеческое спасибо! Лайк и подписка!

[@user-fd5zf5jq9q]

Выполняю "таски" по твоим урокам, спасибо тебе!!!))))

[@odinokun]

Бомбический обзор слайдера. Спасибо.

[@FreelancerLifeStyle]

Пожалуйста!

[@jasonborn4373]

Ребята Евгений это мега человек! Женя спасибо!

[@olegsemenukha4107]

Чем дальше, тем круче! Спасибо!!! ;-) Уроки по calc - это бы было здорово! Очень интересная штука!

[@FreelancerLifeStyle]

Пожалуйста!

[@xxxprog4818]

Как же вовремя, мне как раз кинули линк на сайт Свайпер и я не понимал что к чему. И тут обзор Спасибо!

[@user-qk2oi2go8v]

Очень крутое видео! Огромное спасибо!

[@maxivanov3339]

Всё четко и понятно! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@dmitrykon8606]

О, интересно ! Как раз в последнем проекте перешёл со slick на swiper.

[@FreelancerLifeStyle]

Я рад!