Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js
Привет! В этом видео - большой обзор лучшего (на мой взгляд) слайдера для сайта - swiper.js! Он написан на чистом js, имеет кучу настроек и очень удобен в использовании. Устраивайся поудобнее, в ближайший час я расскажу все самое основное при работе с данным плагином :)
https://clck.ru/PyQVz - Все примеры в одном месте, на GitHub :)
https://swiperjs.com/ - оф. сайт плагина
Содержание:
00:00 - Вступление
00:35 - Базовый слайдер (кол-во слайдов, их группировка, стили кнопок и точек)
18:00 - Выносим кнопки из слайдера
22:30 - Цифровая пагинация
24:13 - Автоплей слайдера
24:57 - Адаптация под разные устройства
27:50 - Делаем разную ширину слайдов
29:48 - Слайдер с увеличенным слайдом в центре
32:39 - Слайдер с тремя выделенными слайдами в центре
34:20 - Lazy load
37:23 - Вертикальный слайдер с превью
45:40 - Как сделать свои классы у слайдера
48:34 - Методы и события
56:34 - Как сделать несколько слайдеров на одной странице
01:02:30 - Слайдер на фоне секции с fade-эффектом
01:06:04 - Превращение в слайдер на мобильных устройствах
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Моя группа по верстке сайтов: http://vk.com/maxgraph
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat
#обучение #swiperjs #слайдер
Видео Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js канала MaxGraph - cайты как страсть
https://clck.ru/PyQVz - Все примеры в одном месте, на GitHub :)
https://swiperjs.com/ - оф. сайт плагина
Содержание:
00:00 - Вступление
00:35 - Базовый слайдер (кол-во слайдов, их группировка, стили кнопок и точек)
18:00 - Выносим кнопки из слайдера
22:30 - Цифровая пагинация
24:13 - Автоплей слайдера
24:57 - Адаптация под разные устройства
27:50 - Делаем разную ширину слайдов
29:48 - Слайдер с увеличенным слайдом в центре
32:39 - Слайдер с тремя выделенными слайдами в центре
34:20 - Lazy load
37:23 - Вертикальный слайдер с превью
45:40 - Как сделать свои классы у слайдера
48:34 - Методы и события
56:34 - Как сделать несколько слайдеров на одной странице
01:02:30 - Слайдер на фоне секции с fade-эффектом
01:06:04 - Превращение в слайдер на мобильных устройствах
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Моя группа по верстке сайтов: http://vk.com/maxgraph
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat
#обучение #swiperjs #слайдер
Видео Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js канала MaxGraph - cайты как страсть
Показать
Комментарии отсутствуют
Информация о видео
24 апреля 2020 г. 20:00:12
01:14:57
Другие видео канала
Слайдер SWIPER. Подробный курс. Подключение настройка примеры.37 ошибок верстальщиков. Не делай так!CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдераАдаптивная верстка сайта интернет-магазина. Объяснение действий. HTML SCSS JS FIGMA GULP WEBPACK.CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSSReact или Vue или Angular. Что Выбрать?Создаем удобный, доступный и рабочий тултип (tooltip) с помощью CSSИтоги 2021 года. Планы на 2022Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проектаАнимированный слайдер на Swiper.js | Верстка макета Figma #3 | Коммерческий сайта от А до Я #18Адаптивный 3D слайдер для сайта на чистом JS | Swiper JS | 3D Responsive SliderКак сделать слайдер на JS?Отправка формы на почту. Верстка валидация и отправка формы без перезагрузки. AJAX. PHPMailer.Build A Responsive Bootstrap Website A Full Screen Image Slider using Bootstrap 4, HTML5 & CSS3Swipe это простоАдаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSSКак работает Event Loop в JavaScript + примеры