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

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

Содержание:
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

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

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

[FreelancerLifeStyle]

🔴 Ну как Вам? За старания жду тонну лайков :)

Содержание:
00:00:00 - Вступление
00:00:31 - Подключение слайдера
00:08:05 - Решение проблемы с FLEX
00:08:31 - Основные свойсва слайдера
00:49:40 - Основные события слайдера
00:52:30 - Основные методы слайдера

[maximcaramam]

Дайте этому человека здоровья и поставьте памятник, потому что он даёт все эти знания бесплатно да и как преподносит их ! ОГРОМНЕЙШИЙ РЕСПЕКТ И ЛАЙК

[artempasko]

Наконец-то самый понятный и наглядный ролик про slick из всех что есть. Женя, выпусти пожалуйста еще видос о swiper slider)

[Hottabov]

Спасибо! Разжевано, показано - все идеально! Побежал применять на практике!

[LokgoD]

Женя, у меня уже кончились слова благодарности))) Огромная, тебе, респектуха за твой труд!!! Я с тобой уже пол года, ты мой главный вдохновитель и крутой преподаватель! Благодарю тебя от души!

[alinahoncharenko]

Невероятно высокий уровень профессионализма чувствуется в каждом видео. Спасибо, что установили такую высокую планку - меня, как человека, который делает первые шаги, это мотивирует ориентироваться на лучших и стремиться делать всё на высшем уровне.

[volodymyryablinskyi]

"и раз уж пошла такая пьянка" когда слушаешь внимательно твои уроки, но тут проскакивают подобные фразочки и сразу настроение поднимается.
лайк не глядя.
видео просто фоссо.
спасибо большое.

[teoreat]

Браво, редко вижу такой качечственный и ровно изложенный материал в русском сегменте. Браво, просто красота!

[МихаилРазуваев-ьл]

Наконец-то увидел структурированную инфу по этой теме! И очень полезно, что показал как прямо кастомить стили элементов: сразу пропала необходимость подключать лишний css-файл. Огромное тебе спасибо!!!

[Александр-бнв]

Я, когда только начинал учиться, самостоятельно разбирался со слайдером slick. У меня это получилось, но в начале, каждая настройка слайдера, как в первый раз была блин!)) Жаль что тогда не было такого качественного видео по слику как это, сократил бы время на освоение раз в 10. Евгений, спасибо! Почерпнул для себя много нового с твоего канала, в частности и с этого видео.

[МаксимКрутов-еб]

Это самое лучшее обучение по созданию и управлению Евгений, спасибо за Ваш труд!

[slu]

"Пока не поставишь лайк, работать не будет... Шутка" - нифига не шутка))

[БурякЯна]

Как раз искал как перенести кнопки навигации в другое место.
Жека ты ракета, ты делаешь жизнь нас новичков проще, спасибо тебе!

[lera]

Это было круто! Много интересного узнала. Понравился чистый подход. Даже стили Автор не подкручивал от slick. В мануале часто, чтобы найти то, что нужно - необходимо перечитать все. На это выделить время надо и вникнуть. Здесь же самое мясо в понятном ритме. Учитывая то, что пользовалась slick уже давно - все равно почерпнула много интересных решений.

Огромная благодарность! Лайкос

[юрийниколенко-яи]

100% лайк та велике дякую.Гарна робота та купа корисного матеріалу

[emilchapchakchi]

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

Спасибо за такое подробное и ясное разъяснение!

Кстати тот параметр характера анимации не easing называется, а cssEase. У них на сайте есть. А easing не работает
P.S. Не претендую на тайминги в описании, это я для своего удобства сделал

[milienakorolova]

Сколько я пыталась сделать этот слайдер, сколько просмотрела объяснений, но это действительно лучший и супер понятный гайд, я в восторге! Огромная благодарность автору)

[КириллГоловнин-фк]

Самый лучший и адекватный учитель на русскоязычном Ютюбе. За увеличенный шрифт кода отдельное спасибо. Все понятно и видно. Очень хорошо.

[АаронБрилль]

мощный выпуск Жека!!!! ТОлько есть еще такая просьба - сделать выпуск где этот слайдер переделывают под конкретные задачи, например: под слайдер новостей, или что нибудь из личного опыта. Кому интересно ставим лайк на комментарий! За выпуск спасибо!

[АлінаДуда-ом]

Сколько пересмотрел в youtube но такого потробного видео еще не видел. Тепер я запросто любой слайд сделаю. Супер!!! Так держать.