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

Слайдер SWIPER. Подробный курс. Почему Swiper лучший слайдер для сайта? Начнем с того, что Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. А также он очень, очень, очень мощный и поможет справится с огромным кол-вом различных задач! Конечно же, все основные возможности слайдера Свайпер я покажу на практике, включая различные интересные решения и лайвхаки. Для этого я создал новый проект, состоящий из HTML CSS и JS файлов. И, прежде всего, нам нужно подключить слайдер Swiper к нашему проекту.

👉Материалы из видео: https://www.patreon.com/posts/43991937

Ссылки слайдера Swiper:
👉Сайт: https://swiperjs.com
👉Демо: https://swiperjs.com/demos/
👉Скачать: https://unpkg.com/browse/swiper@6.3.5/
👉API: https://swiperjs.com/api/
👉StackOverflow: https://stackoverflow.com/questions/tagged/swiper

Полезные уроки:
👉Адаптивная верстка: https://www.youtube.com/watch?v=XbnAKjjlgc4
👉Верстка картинок: https://www.youtube.com/watch?v=nTtuiBXKp88

🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео Слайдер SWIPER. Подробный курс. Подключение настройка примеры. канала Фрилансер по жизни - IT и фриланс