Слайдер Nivo Slider. Установка та налаштування

37

Від автора: вітаю вас, друзі. Починаючи з даної статті, ми з вами будемо працювати з різними слайдерами для сайтів. У цій статті ми розглянемо роботу зі слайдером Nivo Slider, дізнаємося, як встановити та налаштувати Nivo Slider.

Nivo Slider – це, мабуть, один з найбільш популярних слайдерів в мережі. Це і неуидивительно, виходячи з того, що пропонують нам розробники слайдер: різні привабливі ефекти зміни слайдів, кілька тем оформлення на вибір, безліч налаштувань і, звичайно ж, адаптивність, куди ж без неї в сучасному інтернеті.

Отже, слайдер можна скачати зі сторінки на GitHub по посиланню. Документацію по використанню плагіна Nivo Slider можна знайти за цим посиланням. Отже, з архіву, який ми завантажили з GitHub, нам необхідно взяти файл стилів слайдера (nivo-slider.css) і файл самого плагіна (jquery.nivo.slider.pack.js). Також нам знадобиться бібліотека jQuery. Давайте підключимо все це на нашій сторінці.

Далі нам знадобиться певна верстка і підготовлені для слайдера картинки. Картинки, як ви розумієте, бажано підготувати однакового розміру, щоб все виглядало красиво і слайдер не стрибав, підлаштовуючись під картинки різних розмірів. Я візьму картинки, які йдуть в комплекті з плагіном слайдера, що ми завантажили раніше.

Ну і розмітка, яка гранично проста:




Залишилося ініціалізувати слайдер, викликавши його таким нескладним кодом:

$(window).on(‘load’, function() {
$(‘#slider’).nivoSlider();
});

І подивимося заслужений результат в браузері:

Слайдер Nivo Slider. Установка и настройка

Оформлення слайдера за замовчуванням мінімалістично, і ми вправі реалізувати оформлення на свій смак, замінивши слова Prev і Next навігаційними стрілочками, а номери слайдів взявши в кружечки або замінивши ними. Якщо ж вам ліньки возитися з оформленням самостійно, тоді розробники Nivo Slider пропонують нам на вибір чотири вже готових теми: bar, dark, default і light. Нам залишається лише підключити потрібну тему.

Приміром, підключимо тему default:

Слайдер обернем в додатковий блок і вкажемо у вигляді класу використовувану тему:

Слайдер Nivo Slider. Установка и настройка

Краса, чи не так? Як і зазначав раніше, слайдер має безліч налаштувань. Одна з найцікавіших – це ефект зміни слайдів. Ефектів більше десятка, при цьому для кожного слайда можна призначити свій ефект, який буде працювати при перехід до цього слайда. Призначити ефект можна через атрибут data-transition. Давайте спробуємо:




Спробуйте поекспериментувати з різними налаштуваннями, впевнений, вам сподобається. І, якщо ви вперше познайомилися зі слайдером Nivo Slider, мені здається він надовго стане одним з ваших улюбленців при виборі слайдера на сайт.

На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!