Автор: 
Представляю вашему вниманию, красивый слайдер NIVO. Сразу можетепосмотреть DEMO этого слайдера разработчиков, и уже прикрученный на uCoz.
Сразу говорю когда попробывал установить по инструкции появилось очень много проблем, таких что слайдер ни в какую не хотел работать, пришлось брать его с DEMO
Чем же этот слайдер хорош?
9 эффектов смены изображений
Валидный код
Возможность задания параметров работы
Различные способы навигации по изображениям
Вес запакованной версии всего 7kb
Возможность повесить на картинки ссылки
Бесплатно
Испытан в браузерах:
Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4
Opera v10.5
Как видно, этот слайдер картинок не поддерживает, в частности, IE6.
Использование:
1. Для использование Nivo Slider, нам нужны подключить Nivo Slider script и Nivo Slider CSS
на странице в самом конце перед </body>
Code
<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />
<script src="/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });
setTimeout(function(){
$('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
}, 1000);
setTimeout(function(){
$('#slider3').nivoSlider({
pauseTime:5000,
pauseOnHover:false,
controlNavThumbs:true
});
}, 2000);
setTimeout(function(){
$('#slider4').nivoSlider({
effect:'random',
animSpeed:1500,
pauseTime:5000,
startSlide:4,
dir ectionNav:false,
controlNav:true,
keyboardNav:false,
pauseOnHover:false
});
}, 3000);
});
</script>
<script src="/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });
setTimeout(function(){
$('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
}, 1000);
setTimeout(function(){
$('#slider3').nivoSlider({
pauseTime:5000,
pauseOnHover:false,
controlNavThumbs:true
});
}, 2000);
setTimeout(function(){
$('#slider4').nivoSlider({
effect:'random',
animSpeed:1500,
pauseTime:5000,
startSlide:4,
dir ectionNav:false,
controlNav:true,
keyboardNav:false,
pauseOnHover:false
});
}, 3000);
});
</script>
2. Теперь HTML. Обратите внимание чтобы добавить подпись к изображению, нужно прописать
простой атрибут title. Прадставлены все 4 варианта слайдера как ина демо...
Code
<h2>Установки по умолчанию</h2>
<div id="slider1" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" alt=""/>
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
<br/>
<h2>С подписями и Ссылки</h2>
<div id="slider2" class="nivoSlider">
<a href="/"><img src="/images/up.jpg" title="ваша подпись №1" /></a>
<a href="/"><img src="/images/monstersinc.jpg" title="ваша подпись" /></a>
<a href="/"><img src="/images/nemo.jpg" title="ваша подпись№2" /></a>
<a href="/"><img src="/images/walle.jpg" title="ваша подпись" /></a>
</div>
<br/>
<h2>С эскизами</h2>
<div id="slider3" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" alt=""/>
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
<h2>В случайном порядке</h2>
<div id="slider4" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" />
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
<div id="slider1" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" alt=""/>
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
<br/>
<h2>С подписями и Ссылки</h2>
<div id="slider2" class="nivoSlider">
<a href="/"><img src="/images/up.jpg" title="ваша подпись №1" /></a>
<a href="/"><img src="/images/monstersinc.jpg" title="ваша подпись" /></a>
<a href="/"><img src="/images/nemo.jpg" title="ваша подпись№2" /></a>
<a href="/"><img src="/images/walle.jpg" title="ваша подпись" /></a>
</div>
<br/>
<h2>С эскизами</h2>
<div id="slider3" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" alt=""/>
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
<h2>В случайном порядке</h2>
<div id="slider4" class="nivoSlider">
<img src="/images/up.jpg" alt="" />
<img src="/images/monstersinc.jpg" />
<img src="/images/nemo.jpg" alt="" />
<img src="/images/walle.jpg" alt="" />
</div>
