Инструкция по JS-слайдеру Owl Carousel 2

Описание

Детально разбираемся в том, как работает и конфигурируется популярная библиотека Owl Carousel. Документация карусели не очень понятная, так что этим видео мы попробуем компенсировать это.

СОДЕРЖАНИЕ
00:00:00 Введение
00:00:47 Подключение плагина для дальнейшей работы
00:07:44 Опция items
00:10:37 Опция margin
00:11:39 Опция loop
00:13:11 Опция center
00:13:52 Опция mouseDrag
00:14:35 Опция touchDrag
00:15:18 Опции pullDrag, freeDrag (имеется баг, см.видео)
00:17:01 Разница между .owl-stage, .owl-item
00:18:10 Смотрим на мобилке через ngrok
00:21:36 Опция stagePadding
00:22:07 Опции merge, mergeFit
00:23:25 Опция autoWidth
00:24:42 Опция startPosition
00:25:03 Опция urlHashListener
00:26:26 Опция nav
00:26:44 Опция rewind
00:27:22 Опции navText, navElement
00:28:33 Опция slideBy
00:28:48 Опция slideTransition
00:30:08 Опции dots, dotsEach, dotsData
00:31:40 Опции lazyLoad, lazyLoadEager
00:34:16 Опции autoplay, autoplayTimeout, autoplayHoverPause
00:35:18 Опции smartSpeed, fluidSpeed, autoplaySpeed
00:36:10 Опции navSpeed, dotsSpeed, dragEndSpeed
00:37:21 Опция callbacks
00:38:28 Опции responsive, responsiveRefreshRate, responsiveBaseElement
00:40:16 Опции video, videoHeight, videoWidth
00:41:25 Опции animateIn, animateOut, fallbackEasing (animate.css)
00:43:55 Опции info, nestedItemSelector (опции под вопросом)
00:45:03 Опции itemElement, stageElement, navContainer, dotsContainer
00:46:38 Опция checkVisible
00:50:06 Изменение стандартных классов Owl Carousel
00:51:17 События Owl Carousel и подвязывание своих действий на них. Триггериование действий карусили извне.
00:55:00 Описание событий карусели
00:57:22 Общее описание исходных JS-файлов Owl Carousel
00:58:36 Объяснение "болванки" для написания Owl-плагинов
01:01:31 Структура SCSS-стилей Owl'а
01:03:12 Внешние библиотеки в связке с Owl
01:03:38 Разбор официальных демо-примеров для закрепления материала (+ несколько не упоминающихся в разделе "Options" свойств). Как работают анимации в Owl.
01:09:45 Заключение

⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: @makewebchatme

? ? ?
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).

? ? ?
Присоединяйся к нашему Telegram-чату https://t.me/makewebme