Отличный слайдер — Nivo Slider

Отличный слайдер — Nivo Slider

Итак, сегодня будем использовать плагин Nivo Slider.

Шаг 1 — Подключаем сам плагин и его стили

<link rel="stylesheet" href="../themes/default/default. css" type="text/css" media="screen" />

<link rel="stylesheet" href="../themes/pascal/pascal. css" type="text/css" media="screen" />

<link rel="stylesheet" href="../themes/orman/orman. css" type="text/css" media="screen" />

<link rel="stylesheet" href="../nivo-slider. css" type="text/css" media="screen" />

<link rel="stylesheet" href="style. css" type="text/css" media="screen" />

<script type="text/javascript" src="scripts/jquery-1.7.1.min. js"></script>

<script type="text/javascript" src="../jquery. nivo. slider. pack. js"></script>

Как Вы уже могли заметить, мы подключили фреймворк, плагин Nivo Slider и несколько тем для него. В качестве темы будем использовать тему — defailt.

Шаг 2 — Каркас слайдера

<div class="slider-wrapper theme-default">

<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<img src="images/toystory. jpg" alt="" />

<a href="http://dev7studios. com"><img src="images/up. jpg" alt="" title="This is an example of a caption" /></a>

<img src="nemo. jpg" alt="" title="#htmlcaption" />

</div>

<div id="htmlcaption" class="nivo-html-caption">

<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

</div>

</div>

Первый див имеет название темы, что бы поменять тему достаточно изменить слово default на название той тему которую Вы хотите использовать. Также в слайде можно использовать либо просто изображение, либо ссылку (то бишь картинку-ссылку). Так же можно использовать заголовки для изображения, ну я думаю Вы сами разберётесь в каркасе самого слайдера.

Шаг 3 — Последний шаг — Вызов плагина

По умолчанию плагин скрывает кнопки навигации и выводит их только при наведении курсора мыши на слайдер. Дабы исправить эту ситуацию, мы просто добавим одну опцию к вызову плагина — directionNavHide:false.

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({directionNavHide:false});

});

</script>

Готово!


Карта сайта


Информационный сайт Webavtocat.ru