Установка:
1. Заливаем папку "slider_nivo" через FTP в корень сайта
2. Перед тегом /body ставим этот код:
Code <link rel="stylesheet" href="/slider_nivo/nivo/nivo-slider.css" type="text/css" media="screen" />
<script src="/slider_nivo/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:'boxRandom,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse',
pauseTime:5000,
pauseOnHover:false,
boxCols: 8,
boxRows: 4
});
}, 3000);
});
</script>
3. Выбираем из четырёх видов слайдера только один:
1) Стандартный
Code <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>
2) С подписями и ссылками
Code <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>
3) С эскизами
Code <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>
4) Показ в случайном порядке
Code <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>
Спасибо за внимание!
Автор: uNiceGroup
| 