20.03.2022
Простые примеры настройки slick-карусели. Официальная документация здесь – https://kenwheeler.github.io/slick/, ссылка на GIT – https://github.com/kenwheeler/slick/.
Подключаем необходимые скрипты и стили через CDN, можно подключать и локально.
Подключаем стили для карусели Slick и по необходимости базовые стили темы для карусели
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
// подключите slick-theme.css для использования стандартной темы отображения навигации
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
Подключаем jQuery и библиотеку slick.min.js
// jquery
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
// slick.min.js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Пример HTML разметки для Slick карусели, по сути, есть контейнер с классом, который мы будем использовать для инициализации слайдера, и каждый слайд обернут в отдельный блок.
<div class="slick-carousel">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
Простая инициализация слайдера:
$('.single-item').slick();
Примеры использования Slick-слайдера
Single Item – Один элемент
0
Multiple Items
0
Responsive Display
0
Variable Width
0
Adaptive Height
0
Data Attribute Settings
0
Center Mode
0
Lazy Loading
0
Autoplay
0
Fade
0
Slider Syncing
0
События (Events)
// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
console.log(direction);
// left
});
// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
console.log('edge was hit')
});
// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
console.log(nextSlide);
});
Больше настроек ищите на оф. сайте слик-слайдера – https://kenwheeler.github.io/slick/