Один из популярнейших слайдеров на Jquery является Slick Slider. И это не мудрено, так как данный плагин умеет очень много. В большинстве случаев вы будите использовать общепринятые модели слайдера, но давайте взглянем на, что способен данный плагин. А способен о на многое. Для начала подключаем файлы стилей к нашему проекту, я буду в примере использовать файлы из CDN вы можете скачать дистрибудив слайдера Slick с офф. сайта или с Github https://github.com/kenwheeler/slick/
<!-- Добавляем стили из CDN --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/> <!-- Добавляем тему по умолчанию из CDN --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>
Данный код должен быть в самом конце, перед закрывающим тегом </body>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>
//Иницилизируем слайдер с параметрами по умолчанию $('.single-item').slick();
//Указываем что будем выводить по 3 слайда на экран $('.multiple-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 });
//Настройки по выводу слайдов в зависимости от разрешения экрана $('.responsive').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] });
$('.variable-width').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true });
$('.one-time').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true });
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div>
$('.center').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] });
// Используйте леневую загрузку устаноиви ее в data-lazy атрибудет // В нем укажите источник к файлу в место SRC <img data-lazy="img/lazyfonz1.png"/> $('.lazy').slick({ lazyLoad: 'ondemand', slidesToShow: 3, slidesToScroll: 1 });
$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });
$('.fade').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' });
$('.add-remove').slick({ slidesToShow: 3, slidesToScroll: 3 }); $('.js-add-slide').on('click', function() { slideIndex++; $('.add-remove').slick('slickAdd',''); }); $('.js-remove-slide').on('click', function() { $('.add-remove').slick('slickRemove',slideIndex - 1); if (slideIndex !== 0){ slideIndex--; } });' + slideIndex + '
$('.filtering').slick({ slidesToShow: 4, slidesToScroll: 4 }); var filtered = false; $('.js-filter').on('click', function(){ if (filtered === false) { $('.filtering').slick('slickFilter',':even'); $(this).text('Unfilter Slides'); filtered = true; } else { $('.filtering').slick('slickUnfilter'); $(this).text('Filter Slides'); filtered = false; } });
//Уничтожить объект слайдера $('.your-slider').slick('unslick');
$('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider-for', dots: true, centerMode: true, focusOnSelect: true });
$('.single-item-rtl').slick({ rtl: true });
Setting | Type | Default | Description |
---|---|---|---|
accessibility | boolean | true | Включает вкладки и навигацию по клавишам со стрелками |
adaptiveHeight | boolean | false | Обеспечивает адаптивную высоту для односкатных горизонтальных каруселей. |
autoplay | boolean | false | Включает автоигру |
autoplaySpeed | Int (мс) | 3000 | Автоигра Скорость в миллисекундах |
arrows | boolean | true | Предыдущая / Следующая Стрелки |
asNavFor | string | ноль | Установите ползунок для навигации по другому ползунку (имя класса или идентификатора) |
appendArrows | string | $(element) | Изменить место прикрепления навигационных стрелок (Selector, htmlString, Array, Element, jQuery object) |
appendDots | string | $(element) | Изменить местоположение точек навигации (Selector, htmlString, Array, Element, object jQuery) |
prevArrow | string (html | jQuery селектор) | объект (узел DOM | объект jQuery) | <button type = "button" class = "slick-prev"> Предыдущая </ button> | Позволяет выбрать узел или настроить HTML-код для стрелки «Назад». |
nextArrow | string (html | jQuery селектор) | объект (узел DOM | объект jQuery) | <button type = "button" class = "slick-next"> Next </ button> | Позволяет выбрать узел или настроить HTML-код для стрелки «Далее». |
centerMode | boolean | false | Включает центрированный вид с частичными предыдущими / следующими слайдами. Используйте с нечетным номером слайдов ToShow. |
centerPadding | string | '50px' | Боковые отступы в центральном режиме (px или %) |
cssEase | string | 'ease' | CSS3 Animation Easing |
customPaging | function | n/a | Пользовательские шаблоны подкачки. Смотрите источник для примера использования. |
dots | boolean | false | Показать точечные индикаторы |
dotsClass | string | 'slick-dots' | Класс для контейнера точек индикатора слайда |
draggable | boolean | true | Включить перетаскивание мышью |
fade | boolean | false | Включить затухание |
focusOnSelect | boolean | false | Включить фокус на выбранный элемент (нажмите) |
easing | string | 'linear' | Добавьте ослабление для jQuery animate. Использовать с библиотеками замедления или методами по умолчанию |
edgeFriction | integer | 0,15 | Сопротивление при смахивании краев бесконечной карусели |
infinite | boolean | true | Бесконечный цикл скольжения |
initialSlide | integer | 0 | Слайд, чтобы начать |
LazyLoad | string | 'ondemand' | Установите ленивую технику загрузки. Принимает «по требованию» или «прогрессивный» |
mobileFirst | boolean | false | Адаптивные настройки используют мобильный первый расчет |
pauseOnFocus | boolean | true | Пауза автозапуска на фокусе |
pauseOnHover | boolean | true | Пауза автозапуска при наведении |
pauseOnDotsHover | boolean | false | Приостановка автозапуска при наведении точки |
respondTo | string | 'window' | Ширина, на которую реагирует реагирующий объект. Может быть «окно», «слайдер» или «мин» (меньшее из двух) |
responsive | object | none | Объект, содержащий точки останова и объекты настроек (см. Демонстрацию). Включает настройки для заданной ширины экрана. Установите настройки «unlick» вместо объекта, чтобы отключить slick в заданной точке останова. |
rows | int | 1 | Установка более 1 инициализирует режим сетки. Используйте slidesPerRow, чтобы установить, сколько слайдов должно быть в каждой строке. |
slide | element | '' | Элемент запроса для использования в качестве слайда |
slidesPerRow | int | 1 | С режимом сетки, инициализированным с помощью опции строк, это устанавливает, сколько слайдов в каждой строке сетки. Дверь |
slidesToShow | int | 1 | Количество слайдов для показа |
slidesToScroll | int | 1 | Количество слайдов для прокрутки |
speed | Int (мс) | 300 | Скорость анимации скольжения / затухания |
swipe | boolean | true | Включить смахивание |
swipeToSlide | boolean | false | Разрешить пользователям перетаскивать или проводить пальцем прямо к слайду независимо от слайдов ToScroll |
TouchMove | boolean | true | Включить движение слайдов одним касанием |
touchThreshold | int | 5 | Для продвижения слайдов пользователь должен провести пальцем по длине (1 / touchThreshold) * ширина слайдера |
useCSS | boolean | true | Включить / отключить CSS-переходы |
useTransform | boolean | true | Включить / отключить CSS-преобразования |
variableWidth | boolean | false | Слайды переменной ширины |
вертикальный | boolean | false | Режим вертикального скольжения |
verticalSwiping | boolean | false | Режим вертикальной прокрутки |
rtl | boolean | false | Измените направление ползунка, чтобы стать справа налево |
waitForAnimate | boolean | true | Игнорирует запросы на продвижение слайда во время анимации |
zIndex | number | 1000 | Установите значения zIndex для слайдов, полезно для IE9 и ниже |
Событие | Аргументы | Описание |
---|---|---|
afterChange | slick, currentSlide | Пожары после смены слайдов |
beforeChange | slick, текущий слайд, следующий слайд | Пожары перед сменой слайдов |
breakpoint | событие, slick, точка останова | Пожары после достижения точки останова. |
destroy | событие, slick | Когда слайдер уничтожен или не скользит. |
edge | slick, направление | Запускается, когда ребро прокручивается в бесконечном режиме. |
init | slick | Срабатывает после первой инициализации. |
reInit | slick | Срабатывает после каждой повторной инициализации |
SetPosition | slick | Пожары после изменения положения / размера |
swipe | slick, направление | Пожары после удара / перетаскивания |
lazyLoaded | событие, slick, изображение, imageSource | Срабатывает после загрузки изображения лениво |
lazyLoadError | событие, slick, изображение, imageSource | Срабатывает после того, как изображение не загружается |
Метод | Аргументы | Описание |
---|---|---|
slickCurrentSlide | none | Возвращает текущий индекс слайда |
slickGoTo | int: номер слайда, логическое значение: не анимировать | Переходит к слайду по индексу |
slickNext | none | Переходит к следующему слайду |
slickPrev | none | Переходит к предыдущему слайду |
slickPause | none | Паузы автовоспроизведения |
slickPlay | none | Запускает автозапуск |
slickAdd | HTML или DOM объект, индекс, addBefore | объект |
slickRemove | index, removeBefore | Если для removeBefore задано значение false, удалите указатель, следующий за слайдом, или последний слайд, если индекс не установлен. |
slickFilter | Селектор или функция | Фильтрует слайды, используя jQuery .filter () |
slickUnfilter | index | Удаляет примененную фильтрацию |
slickGetOption | опция: string | Получает индивидуальное значение параметра. |
slickSetOption | опция: string, значение: зависит от опции, refresh: логическое значение | Установите для параметра true значение true, если это обновление пользовательского интерфейса. |
unslick | none | Разрушает slick |
getSlick | none | Получить гладкий объект |