SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдера

Описание к видео SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдера

Слик слайдер - лучший адаптивный слайдер для сайта. Работает с библиотекой jQuery и владеет невероятными возможностями для решения любых задач.
В этом выпуске подробно расскажу о его свойствах и возможностях. Подробный гайд. Подключение и настройка слайдера. Решение проблемы slick и flex.

👉 Сайт слайдера Slick: https://kenwheeler.github.io/slick/
👉 Шпаргалка имен классов: https://fls.guru/slick.html
👉 Пример из видео: https://fls.guru/howtodoit/howtodoit_09/
👉 Пример из видео (скачать): https://fls.guru/howtodoit/slick.zip

Содержание:
00:00:00 - Вступление
00:00:31 - Подключение слайдера
00:08:05 - Решение проблемы с FLEX
Основные свойсва слайдера
00:09:02 - Стилизация кнопок
00:12:44 - Кнопки вкл/выкл, Slick Arrows
00:13:37 - Точки вкл/выкл, Slick Dots
00:14:14 - Стилизация точек
00:16:41 - Адаптивная высота, adaptiveHeight
00:18:15 - Количество слайдов на показ, slidesToShow
00:20:12 - Количество слайдов при скроле, slidesToScroll
00:20:56 - Скорость смены слайдов, speed
00:21:17 - Характер анимации скрола, cssEase
00:22:15 - Бесконечность слайдера, infinite
00:23:26 - С какого слайда начинается слайдер, initialSlide
00:23:40 - Автопроигрывание слайдера, autoplay
00:24:02 - Скорость автопроигрывания, autoplaySpeed
00:24:52 - Остановка атопроигрывания, pause
00:26:23 - Перелистывание слайдов мышкой/пальцем, draggable/swipe
00:27:27 - Расстояние необходимое для свайпа, touchTreshhold
00:28:14 - Возможности тачскирина вкл/выкл, touchMove
00:29:04 - Возможность спамить переключениями слайда, waitForAnimate
00:30:13 - Делает активный слайд центральным, centerMode
00:32:04 - Автоматическая адаптивность слайдера, variableWidth
00:34:45 - Количество рядов в слайде, rows
00:35:51 - Количество слайдов в ряду, slidesPerRow
00:37:02 - Вертикальный слайдер, vertical
00:38:42 - Вертикальный свайп, verticalSwiping
00:39:03 - Двойной слайдер
00:41:08 - Слайды заменяются, fade
00:41:59 - Связка двух слайдеров, asNavFor
00:43:28 - Адаптивность через брейкпоинты, responsive
00:45:24 - Меняем max-width на min-width, mobileFirst
00:46:04 - Ленивая загрузка (оптимизации подгрузки), data-lazy
00:47:44 - Перемещение стрелок/точек в контейнер, appendArrows/appendDots
00:49:40 - Основные события слайдера
00:52:30 - Основные методы слайдера
Спасибо Emil Chapchakchi

 🔴 Получить доступ к плюшкам + поддержать канал:   / 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  

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал:    / freelancerlifestyle  

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

Комментарии

Информация по комментариям в разработке