Широкоформатный Слайдер для сайта

Всем доброго дня или ночи, это уж кого как вставило.

Сегодня, собравшись с мыслями и отбросив все сомнения, мы вместе с вами уважаемые читатели нашего блога, рассмотрим интересное и популярное решение по выводу изображений на страницах сайта в виде “слайдера”, иначе, доведенного до ума, хорошо всем знакомого, ротатора баннеров.

Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.

ДемоСкачать

Установка:

Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:

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

Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:

<div id="banner">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>

Как вы видите ничего сложного и особо навороченного в данном коде нет, все настройки вынесены в отдельный файл стилей style.css, который так же следует подключить к нашему документу:

<link rel="stylesheet" type="text/css" href="css/style.css" title="styles1" />

Соответственно путь к файлу у вас может разниться с указанным в примере, так что будьте внимательны и постарайтесь не лопухнуться, иначе вылезет полнейший косяк. В стилях тоже особо сложных настроек не наблюдается, думаю трудностей не возникнет, если решите поэкспериментировать с параметрами при желании изменить внешний вид слайдера.

/* Основа ротатора изображений */
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}

/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }

/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }

/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }

/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }

ДемоСкачать

Вот и все, проделав все вышеописанное, предварительно не забыв скачать архив с исходниками, вы получите в свое распоряжение замечательный, широкоформатный слайдер для изображений с красивым анимированным эффектом перехода от одной картинки к другой и с возможностью вывода анонса статей, а что еще надо страждущему блогеру.

Всем спасибо и удачи.

Отдельное спасибо: Dobrovoimaster