Итак смотрим DEMO ничему не удивляемся потому что вроде бы ничего особого нет и читаем дальше потому что вы видите самый универсальный из придуманных до сих пор слайдеров, в котором можно изменить что угодно
Скачиваем последнюю версию. Если ссылка оказалась битая, то вышла новая версия и переходим на официальный сайт и скачиваем оттуда
Внутри архива уже все лежит, но продублирую все что там есть
В HEAD мы запихиваем скрипты:
Code
<!-- Обычно располагается в разделе <head> -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
Сам слайдер распологается в BODY и его код
Code
<!-- Располагаются в разделе <body> -->
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com">
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
</a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
Однако если вы не хотите использовать различные заголовки дополнительный текст и т д, то вы можете упростить этот код до такого:
Code
<div id="slider-wrapper">
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" />
<img src="images/slide3.jpg" alt="" />
<img src="images/slide4.jpg" alt="" />
</div>
</div>
Далее смотрим прикрепленный архив папку /demo/images/
Там вы обнаружите файлы:
arrows.png (стрелки влево/вправо)
bullets.png (точечный индикатор)
slider.png (фоновая рамка)
background.png (фон, по желанию)
loading.gif (индикатор загрузки, по желанию)
Все их можно перерисовать в фотошопе как вам будет удобно и использовать вместо стандартных свои
Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в документе demo.html
Обратите внимание на CSS а конкретно на
#slider-wrapper
#slider
.nivo-controlNav
.nivo-directionNav
В них без проблем меняются размеры слайдера расположение в нем кнопок и т д
Обратите внимание отдельно настраивается размер изображений и всего слайдера в общем
Стандартно в слайдере не видно кнопки переключения слайдом пока на него не навели мышь
Это можно исправить
В файле demo.html найдите строки
Code
<script>
$(window).load(function() {
$('#slider').nivoSlider();
});
И замените на
Code
<script>
$(window).load(function() {
$('#slider').nivoSlider({directionNavHide:false});
});
Вот и все
В итоге этот слайдер можно сжать до размером маленького рекламного окошка или растянуть на всю ширину страницы, красиво его украсить или убрать все рамки, кнопки и прочее кроме самых слайдов, а быть может в нем будут крутиться баннеры друзей вашего сайта.
Эксперементируйте все в ваших руках