Замечательный слайдер с кучей всевозможных красивых переходов украсит любой уголок вашего сайта.
Установка:
После /head на нужных страницах вставляйте:
Code
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
<script src="/js/cufon-yui.js" type="text/javascript"></script>
<script src="/js/Museo_Slab.font.js" type="text/javascript"></script>
<script src="/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2', { fontFamily:'Museo Slab' });
Cufon.replace('h3', { fontFamily:'Museo Slab' });
$(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:t rue
});
}, 2000);
setTimeout(function(){
$('#slider4').nivoSlider({
effect:'random',
animSpeed:1500,
pauseTime:5000,
s tartSlide:2,
directionNav:false,
controlNav:true,
keyboardNav:false,
pauseOnHover:false
});
}, 3000);
});
</script>
Следующий код в то место, где будет сам слайдер:
1) Первый слайдер:
Code
<div style="width:550;height:220;" id="slider1" class="nivoSlider">
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
</div>
2) Второй слайдер:
Code
<div style="width:550;height:220;" id="slider2" class="nivoSlider">
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
</div>
3) Третий слайдер:
Code
<div style="width:550;height:220;" id="slider3" class="nivoSlider">
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
</div>
4) Четвёртый слайдер:
Code
<div style="width:550;height:220;" id="slider2" class="nivoSlider">
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
<img src="Ссылка на картинку" alt="Описание" />
</div>
Не забываем загрузить файлы себе на сайт
Cкачать!