Установка і настройка слайдера jQuery lightSlider

61

Від автора: дуже часто при створенні веб-сторінок необхідно відображати різну інформацію у вигляді слайдера, так як слайдер значно економить місце на сторінці при відображенні великої кількості інформації і, звичайно ж, покращує зовнішній вигляд. У даний момент створено величезну кількість готових скриптів, з допомогою яких можна організувати слайд шоу контенту на сторінках сайту, тому в уроці Установка і настройка слайдера jQuery lightSlider ми розглянемо функціональний і простий у використанні слайдер контенту під назвою JQuery lightSlider.

Установка і настройка слайдера jQuery lightSliderУстановка і настройка слайдера jQuery lightSlider

Установка слайдера

Отже, давайте перейдемо на офіційний сайт слайдера jQuery lightSlider.

Установка і настройка слайдера jQuery lightSlider

Далі переходимо за посиланням Download і завантажуємо архів з актуальною версією слайдера. Зверніть увагу, що на головній сторінці офіційного сайту присутня інструкція по установці і настройці цього слайдера, а на сторінці Examples представлені різні приклади використання цього слайдера.

Для роботи слайдера, обов’язково необхідна бібліотека jQuery, бо як слайдер являє собою плагін для цієї бібліотеки. Тому першим ділом підключимо її до нашого сайту:

Скачаний архів распакуем і, переходимо в отриманий каталог. Компоненти слайдера розташовуються в папці src, тому відкриваємо папку і з каталогу js, копіюємо бібліотеку lightslider.js і підключаємо її до тестовій сторінці (попередньо додавши її в каталог зберігання скриптів JavaScript сайту):

Далі з папки css копіюємо файл стилів lightslider.css і так само підключаємо його на нашому сайті:

Також скопіювати каталог img в корінь тестового сайту, в якому розташовані зображення, необхідні для формування елементів управління слайдером. На цьому установка слайдера завершена.

Висновок слайдера jQuery lightSlider на екран

JQuery Слайдер lightSlider, являє собою слайдер контенту, тому в кожному слайді дозволяється відображати абсолютно довільне вміст, тобто це може бути як простий текст, так і зображення. А значить, створимо таку розмітку для майбутнього слайдера:

  • Перший слайд

    Lorem ipsum Cupidatat quis pariatur anim.

  • Другий слайд

    Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.

  • Третій слайд

    Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.Lorem ipsum Cupidatat quis pariatur anim.

  • Четвертий слайд

    Установка і настройка слайдера jQuery lightSlider

  • П’ятий слайд

    Установка і настройка слайдера jQuery lightSlider

  • Шостий слайд

    Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.

  • Сьомий

    Lorem ipsum Cupidatat quis pariatur anim.

  • Восьмий слайд

    Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.

Тобто, як Ви бачите, слайд — це окремий блок, li, всередині якого можна розташовувати довільне вміст.
Далі в файл script.js додамо наступний код:

jQuery(document).ready(function($) {
$(‘#lightSlider’).lightSlider();
});

Тобто за допомогою бібліотеки jQuery, вибираємо блок майбутнього слайдера, тобто блок ul з ідентифікатором lightSlider, і викликаємо на виконання метод lightSlider(). При цьому на екрані ми побачимо наступне.

Установка і настройка слайдера jQuery lightSlider

Базові налаштування

Тепер давайте розглянемо базові установки слайдера lightSlider:

item кількість слайдів відображаються при на сторінці;

adaptiveHeight – адаптивна висота слайдів, якщо даній настройці передати true, то при перегляді кожного слайда його висота буде визначатися в залежності від контенту, що зберігається в ньому. Тобто в цьому випадку висота кожного слайда не буде приведена до певного значення;

slideMove – кількість слайдів, що переміщуються за один клік по елементам управління;

speed – швидкість виконання анімаційних ефектів при зміні слайдів;

slideMargin – зовнішній відступ між слайдами;

loop – зациклення слайдера по колу;

rtl – прокрутка слайдера у зворотному порядку;

auto – автозапуск слайдера.

Налаштування передаються в слайдер, у вигляді текст-об’єкта.

jQuery(document).ready(function($) {
$(‘#lightSlider’).lightSlider({
item:1,
adaptiveHeight:true,
slideMove:1,
speed:100,
slideMargin:30,
loop:true,
rtl:true,
});
});

При цьому на екрані ми побачимо наступне:

Установка і настройка слайдера jQuery lightSlider

Адаптивний слайдер

При правильному налаштуванні, слайдер lightSlider дуже добре відображається на різних мобільних пристроях (мобільних телефонах так і планшетах), з різним розміром екрану. Давайте розглянемо наступну групу налаштувань:

$(document).ready(function() {
$(«#lightSlider»).lightSlider({
item:4,
slideMargin:10,
slideMove: 2,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1,
slideMargin:6
}
}
],
});
});

Параметр response відповідає за налаштування адаптивності слайдера. При цьому дана настройка складова – тобто це масив налаштувань, який використовується для визначення груп параметрів, які працюють при певному розмірі вікна браузера. У параметрі breakpoint, вказується розмір вікна браузера при якому будуть доступні налаштування з групи settings.

При цьому на екрані ми побачимо наступне (ширина браузера 700 пікселів):

Установка і настройка слайдера jQuery lightSlider

Ширина браузера менше 400 пікселів:

Установка і настройка слайдера jQuery lightSlider

Інтеграція з галереєю зображень lightGallery

Слайдер lightSlider дуже добре працює з галереєю зображень lightGallery. Тому переходимо за посиланням lightGallery на офіційному сайті, завантажуємо бібліотеку галереї і аналогічно підключаємо необхідні файли на сторінці тестового сайту.

Установка і настройка слайдера jQuery lightSlider

Html – розмітка, яка необхідна для роботи слайдера:

  • Установка і настройка слайдера jQuery lightSlider
  • Установка і настройка слайдера jQuery lightSlider
  • Установка і настройка слайдера jQuery lightSlider
  • Установка і настройка слайдера jQuery lightSlider
  • Установка і настройка слайдера jQuery lightSlider
  • Установка і настройка слайдера jQuery lightSlider

Тобто, знову ж кожен слайд — це окремий блок li, в атрибуті data-thumb, якого міститься шлях до мініатюрі зображення. Як вміст блоку, використовується зображення, яке являє собою зображення вихідного розміру (повного розміру). Так само в атрибуті data-src, містить повний шлях до зображення, який необхідний для роботи галереї lightGalery.

Далі додамо наступний код:

$(document).ready(function() {
$(«#lightSlider»).lightSlider({
item:1,
thumbItem:10,
gallery: true,
thumbMargin: 5,
onSliderLoad: function(el) {
el.lightGallery();
}
});
});

У коді використовуються наступні параметри:

gallery – при передачі даного параметру TRUE слайдер контенту працює як слайдер зображень;

thumbItem – кількість мініатюр, що з’являються під вихідним зображенням;

thumbMargin – зовнішній відступ між слайдами;

onSliderLoad – параметр, який дозволяє описати функцію обробник, яка виконається після повного завантаження слайдера на сторінці сайту. Функція приймає в якості параметра змінну el – це об’єкт вибраного елемента, який використовується для роботи слайдера. Код обробника події, використовуючи об’єкт el, ми викликаємо метод lightGallery, який запускає в роботу галерею lightGallery.

При цьому на екрані ми побачимо наступне:

Установка і настройка слайдера jQuery lightSlider

Якщо клікнути на зображення повного розміру – включиться в роботу галерея lightGallery:

Установка і настройка слайдера jQuery lightSlider

Події слайдера

Слайдер lightSlider крім події onSliderLoad, підтримує ще кілька подій, які можна використовувати для створення функцій обробників.

onBeforeStart: function (el) {},
onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}

onBeforeStart – спрацьовує перед початком завантаження слайдера;

onBeforeSlide – спрацьовує перед зміною слайдів;

onAfterSlide – спрацьовує після слайда;

onBeforeNextSlide – спрацьовує перед переходом до наступного слайда;

onBeforePrevSlide – спрацьовує перед переходом до попереднього слайда.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!