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