Загрузка. Пожалуйста, подождите...

Главная страница → → → → Nivo Slider для шаблонов ucoz

Nivo Slider для шаблонов ucoz

Nivo Slider для шаблонов ucoz. Единственный самый удобный, работающий во всех браузерах и легко настраиваемый Nivo Slider для шаблонов ucoz. Чем же этот слайдер хорош?

Nivo Slider для шаблонов ucoz

9 эффектов смены изображений
Валидный код
Возможность задания параметров работы
Различные способы навигации по изображениям
Вес запакованной версии всего 7kb
Возможность повесить на картинки ссылки
Бесплатно

Испытан в браузерах:
Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4
Opera v10.5


Использование:
1. Для использование Nivo Slider, нам нужны подключить Nivo Slider script и Nivo Slider CSS
на странице в самом конце перед
</body> 
<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>

2. Теперь HTML. Обратите внимание чтобы добавить подпись к изображению, нужно прописать
простой атрибут title. Прадставлены все 4 варианта слайдера как и на демо...
<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>

Ну вот вроде и все.

slider_nivo.rar (345.54 Kb)

Ucoz

Обновлено: 21 января 2014

ucoz шаблонов slider nivo

445 03.04.13
Информация
Только зарегистрированные пользователи могут оставлять в данной новости свои комментарии.