От автора: приветствую вас, друзья. Начиная с данной статьи, мы с вами будем работать с различными слайдерами для сайтов. В этой статье мы рассмотрим работу со слайдером Nivo Slider, узнаем, как установить и настроить Nivo Slider.
Nivo Slider – это, пожалуй, один из наиболее популярных слайдеров в сети. Это и неуидивительно, исходя из того, что предлагают нам разработчики слайдер: различные привлекательные эффекты смены слайдов, несколько тем оформления на выбор, множество настроек и, конечно же, адаптивность, куда же без нее в современном вебе.
Итак, скачать слайдер можно со страницы на GitHub по ссылке. Документацию по использованию плагина Nivo Slider можно найти по этой ссылке. Итак, из архива, который мы скачали с GitHub, нам необходимо взять файл стилей слайдера (nivo-slider.css) и файл самого плагина (jquery.nivo.slider.pack.js). Также нам потребуется библиотека jQuery. Давайте подключим все это к нашей странице.
|
1 2 3 4 |
<link rel="stylesheet" href="nivo-slider.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script> <script src="jquery.nivo.slider.pack.js"></script> |
Далее нам потребуется определенная верстка и подготовленные для слайдера картинки. Картинки, как вы понимаете, желательно подготовить одинакового размера, чтобы все смотрелось красиво и слайдер не прыгал, подстраиваясь под картинки разных размеров. Я возьму картинки, которые идут в комплекте с плагином слайдера, что мы скачали ранее.
Ну и разметка, которая предельно проста:
|
1 2 3 4 5 6 |
<div id="slider" class="nivoSlider"> <img src="images/nemo.jpg" alt="" /> <img src="images/toystory.jpg" alt="" /> <img src="images/up.jpg" alt="" /> <img src="images/walle.jpg" alt="" /> </div> |
Осталось инициализировать слайдер, вызвав его следующим несложным кодом:
|
1 2 3 |
$(window).on('load', function() { $('#slider').nivoSlider(); }); |
И посмотрим заслуженный результат в браузере:
Оформление слайдера по умолчанию минималистично, и мы вправе реализовать оформление на свой вкус, заменив слова Prev и Next навигационными стрелочками, а номера слайдов взяв в кружочки или заменив ими. Если же вам лень возиться с оформлением самостоятельно, тогда разработчики Nivo Slider предлагают нам на выбор четыре уже готовых темы: bar, dark, default и light. Нам остается лишь подключить нужную тему.
К примеру, подключим тему default:
|
1 |
<link rel="stylesheet" href="themes/default/default.css"> |
Слайдер обернем в дополнительный блок и укажем в виде класса используемую тему:
|
1 2 3 4 5 |
<div class="theme-default"> <div id="slider" class="nivoSlider"> ... </div> </div> |
Красота, не так ли? Как и отмечал ранее, слайдер имеет множество настроек. Одна из самых интересных – это эффект смены слайдов. Эффектов более десятка, при этом для каждого слайда можно назначить свой эффект, который будет работать при переходе к данному слайду. Назначить эффект можно через атрибут data-transition. Давайте попробуем:
|
1 2 3 4 5 6 7 |
<img src="images/nemo.jpg" alt="" data-transition="fade" /> <img src="images/toystory.jpg" alt="" data-transition=" sliceDownRight" /> <img src="images/up.jpg" alt="" data-transition="sliceUpLeft" /> <img src="images/walle.jpg" alt="" data-transition="boxRainGrow " /> |
Попробуйте поэкспериментировать с различными настройками, уверен, вам понравится. И, если вы впервые познакомились со слайдером Nivo Slider, мне кажется он станет надолго одним из ваших любимчиков при выборе слайдера на сайт.
На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (5)