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

Слайдер SWIPER. Подробный курс. Почему Swiper лучший слайдер для сайта? Начнем с того, что Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. А также он очень, очень, очень мощный и поможет справится с огромным кол-вом различных задач! Конечно же, все основные возможности слайдера Свайпер я покажу на практике, включая различные интересные решения и лайвхаки. Для этого я создал новый проект, состоящий из HTML CSS и JS файлов. И, прежде всего, нам нужно подключить слайдер Swiper к нашему проекту. 👉Материалы из видео:   / 43991937   Ссылки слайдера Swiper: 👉Сайт: https://swiperjs.com 👉Демо: https://swiperjs.com/demos/ 👉Скачать: https://unpkg.com/browse/[email protected]/ 👉API: https://swiperjs.com/api/ 👉StackOverflow: https://stackoverflow.com/questions/t... Полезные уроки: 👉Адаптивная верстка:    • Адаптивная вёрстка сайтов за 37 минут + ма...   👉Верстка картинок:    • Адаптивные изображения. Практические прием...   🔴 Получить доступ к плюшкам + поддержать канал:   / freelancerlifestyle   🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: https://t.me/flschat (https://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   🤟 Живи, а работай в свободное время! ©