- Приклади використання «slick slider»
- Виклик без параметрів
- кілька слайдів
- режим центрування
- адаптивний слайдер
- Налаштування slick slider
- методи слайдера
- Події Slick slider
Slick slider - це jquery плагін для швидкого створення на сайті адаптивного слайдера будь-якої складності. Його функціонал дозволяє реалізувати зациклення, автопроігриваніе, ефект переходу, динамічне додавання слайдів і багато іншого. Окремо виділю можливість гортання слайдера пальцем на мобільних пристроях.
Завантажити Slick slider 1.8.1
Підключення «slick slider» здійснюється наступним чином.
<Script src = "// code.jquery.com/jquery-1.11.0.min.js"> </ script> <script src = "/ slick / slick.min.js"> </ script> <link rel = "stylesheet" type = "text / css" href = "/ slick / slick.css" /> <link rel = "stylesheet" type = "text / css" href = "/ slick / slick-theme.css" / >Jquery довантажувати тільки якщо на сайті його ще немає.
Кожен слайд обертається в «div», всередині якого може бути будь-який вміст:
<Div class = "slider single-item"> <div> 1 </ div> <div> 2 </ div> <div> 3 </ div> <div> 4 </ div> <div> 5 </ div > <div> 6 </ div> </ div>Приклади використання «slick slider»
Розглянемо приклади виклику плагіна з різними настройками.
Виклик без параметрів
При визвове без параметрів на сторінці буде однин слайд з навігаційними стрілками.
$ ( '. Single-item'). Slick ();кілька слайдів
У прикладі виводимо 3 слайда з параметрами зацикленої прокрутки (infinite), відображенням навігаційних точок (dots) і кількістю прокручуваних слайдів за раз.
$ ( '. Multiple-items'). Slick ({infinite: true, dots: true, slidesToShow: 3, slidesToScroll: 1});режим центрування
У режимі центрування активний слайд встановлюється по центру з класом «slick-center».
$ ( '. Center'). Slick ({centerMode: true, slidesToShow: 3,});адаптивний слайдер
Якщо на сайті адаптивна верстка, то слайдер можна підлаштувати під ширину екрану. Для цього використовуйте властивість «responsive». Воно дозволяє встановити для різних дозволів свої настройки. Розглянемо приклад.
$ ( '. Slick-example'). Slick ({infinite: true, dots: true, slidesToShow: 3, slidesToScroll: 1, responsive: [{breakpoint: 768, settings: {slidesToShow: 2,}}, {breakpoint: 480, settings: {slidesToShow: 1,}}]});У прикладі на основному дозволі сайту в ряд виводиться 3 слайда. Якщо ширина видимої області від 768 пікселів до 481, то виводиться 2 слайди. І один, якщо ширина менше 480 пікселів.
В налаштуваннях адаптивності можна перераховувати будь-які параметри, не тільки «slidesToShow». Наприклад, на мобільній версії сайту можна не виводити стрілки навігації або додати центрування слайдів.
Налаштування slick slider
У таблиці наведені основні настройки. Повний перелік на сайті розробника.
Параметр Тип Default Опис adaptiveHeight boolean false Включає адаптування висоти для одіночкного слайда горизонтальної каруселі autoplay boolean false Автоматична прокрутка autoplaySpeed int (ms) 3000 Швидкість автопрокрутки в мілісекундах arrows boolean true Показ / приховування навігаційних кнопок prevArrow html button Заміна стандартної кнопки Preview nextArrow html button Заміна стандартної кнопки Next dots boolean false Показ / приховування навігаційних точок під слайдером draggable boolean true Включає / вимикає здатність перегортання слайдера перетягуванням мишею fade boolean false Ефект загасання при гортанні слайдів focusOnSelect boolean false Встановлює фокус на вибраний елемент каруселі при кліці easing string 'linear' Анімаційні ефекти переходу, їх набір залежить від підключених jQuery Easing плагінів edgeFriction integer 0.15 Опір при спроби прокрутити карусель, коли далі немає слайдів і вона не заціліли infinite boolean true Нескінченне прокручування (зациклення) initialSlide integer 0 Номер слайда, з якого починати показ lazyLoad string 'ondemand' Тип подгрузки слайдів. Приймає 'ondemand' або 'progressive' pauseOnHover boolean true Пауза автопроігриванія при наведенні миші pauseOnDotsHover boolean false Пауза автопроігриванія при наведенні миші на навігаційні точки pauseOnHover boolean true Пауза автопроігриванія при наведенні миші rows int 1 Може бути 'window', 'slider' або 'min 'методи слайдера
Методи - це функції, які можуть зробити зі слайдером якась агресивна дія або повідомити про його поточний стан. Метод можна викликати в будь-якому обробнику javascript, наприклад, при натисканні на кнопку.
slickCurrentSlide - повертає номер поточного слайда. Відлік ведеться з нуля.
$ ( '. Single-item'). Slick ( 'slickCurrentSlide');slickGoTo - прокручує на слайд з зазначеним номером.
$ ( '. Single-item'). Slick ( 'slickGoTo', 4);slickNext - прокручує на один слайд вперед.
$ ( '. Single-item'). Slick ( 'slickNext');slickPrev - прокручує на один слайд назад.
slickPause - зупиняє автоматичну прокрутку.
slickPrev - запускає автоматичну прокрутку.
Події Slick slider
На деякі події слайдера можна встановлювати свої обробники. Наприклад, після прокрутки до 5 слайду ми повинні зробити якусь дію. Для цього вмикаємо обробник події «afterChange».
$ ( '# Slick-slider'). On ( 'afterChange', function (event, slick, currentSlide) {if (currentSlide == 5) {console.log ( 'Здійснено перехід до 5му слайду');}});Якщо дію слід зробити перед здійсненням переходу, то задіємо подія «beforeChange».
$ ( '# Slick-slider'). On ( 'beforeChange', function (event, slick, currentSlide, nextSlide) {console.log ( 'Збираємося здійснити перехід до' + nextSlide + 'слайду');});
