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

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

От автора: приветствую вас, друзья. Начиная с данной статьи, мы с вами будем работать с различными слайдерами для сайтов. В этой статье мы рассмотрим работу со слайдером Nivo Slider, узнаем, как установить и настроить Nivo Slider.

Nivo Slider – это, пожалуй, один из наиболее популярных слайдеров в сети. Это и неуидивительно, исходя из того, что предлагают нам разработчики слайдер: различные привлекательные эффекты смены слайдов, несколько тем оформления на выбор, множество настроек и, конечно же, адаптивность, куда же без нее в современном вебе.

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

<link rel="stylesheet" href="nivo-slider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
></script>
<script src="jquery.nivo.slider.pack.js"></script>

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

Ну и разметка, которая предельно проста:

<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>

Осталось инициализировать слайдер, вызвав его следующим несложным кодом:

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

И посмотрим заслуженный результат в браузере:

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

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

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

<link rel="stylesheet" href="themes/default/default.css">

Слайдер обернем в дополнительный блок и укажем в виде класса используемую тему:

<div class="theme-default">
	<div id="slider" class="nivoSlider">
		...
	</div>
</div>

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

Красота, не так ли? Как и отмечал ранее, слайдер имеет множество настроек. Одна из самых интересных – это эффект смены слайдов. Эффектов более десятка, при этом для каждого слайда можно назначить свой эффект, который будет работать при переходе к данному слайду. Назначить эффект можно через атрибут data-transition. Давайте попробуем:

<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 вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Алексей

    Сделал все как написано выше, в браузере Firefox при уменьшении ширины .nivoSlider до 720px отображается отлично в IE тоже, но в Google Chrome все равно растянуто по всей ширине экрана, в чем может быть проблема?

    • Андрей Кудлай

      Только что скачал файлы из исходников к статье, проверил в Хроме — проблемы нет, слайдер замечательно адаптируется — скриншот.

      • Алексей

        Я не по поводу адаптивности, хотел бы уменьшить размер самого слайдадо width: 720px; , чтобы он не тянулся к экрану, а при уменьшении меньше 720px? адаптировался.

        • Андрей Кудлай

          Поместите весь слайдер в блок, для которого определите правило max-width: 720px; — после этого слайдер не будет «вылазить» за эту ширину, но будет прекрасно адаптироваться, если ширина меньше. Только что проверил — так работает.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree