Два и более Nivo Slider на одной странице
2 августа 2011Бывает случаи, когда надо установить несколько слайдеров на одной странице. Проблем с установкой одного слайдера нет, а вот с двумя и более возникают трудности. Устанавливаем два и более — работает только первый, отключаешь первый — работает второй и т.д. В чём проблема? Вопрос решился и делимcя с Вами.
Весь фокус заключается в том что для каждого слайдера нужно установить свои уникальные значения.
В <head> пишем:
<!-- темы оформления -->
<link rel= "stylesheet" href="/nivoslider/themes/default/default.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/nivoslider/themes/pascal/pascal.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/nivoslider/themes/orman/orman.css" type= "text/css" media= "screen" />
<!-- файл css для слайдера -->
<link rel= "stylesheet" href="/nivoslider/nivo-slider.css" type= "text/css" media= "screen" />
<!-- файлы js -->
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type= "text/javascript"></script>
<script src="/nivoslider/jquery.nivo.slider.pack.js" type= "text/javascript"></script>Пишем код слайдеров не забывая изменять размеры картинок (если разные темы) и имена.
<h2>Default Theme</h2>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="/image/toystory.jpg" alt="" />
<img src="/image/up.jpg" alt="" />
<img src="/image/walle.jpg" alt="" />
<img src="/image/nemo.jpg" alt="" />
</div>
</div>
<h2>Pascal Theme</h2>
<div class="slider-wrapper theme-pascal">
<div id="slider_2" class="nivoSlider">
<img src="/image/toystory_pascal.jpg" alt="" />
<img src="/image/up_pascal.jpg" alt="" />
<img src="/image/walle_pascal.jpg" alt="" />
<img src="/image/nemo_pascal.jpg" alt="" />
</div>
</div>
<h2>Orman Theme</h2>
<div class="slider-wrapper theme-orman">
<div id="slider_3" class="nivoSlider">
<img src="/image/toystory_orman.jpg" alt="" />
<img src="/image/up_orman.jpg" alt="" />
<img src="/image/walle_orman.jpg" alt="" />
<img src="/image/nemo_orman.jpg" alt="" />
</div>
</div>Как видно мы меняем тему слайдера в строке <div class="slider-wrapper theme-default"> (если хотите сделать общую тему, то не меняйте) и меняем номер слайдера в строке <div id="slider" class="nivoSlider"> (меняем обязательно).
Затем добавляем в таблицу CSS данные:
#slider {
position:relative;
width:618px;
height:246px;
background:url (images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
#slider_2 {
position:relative;
width:630px;
height:235px;
background:url (images/loading.gif) no-repeat 50% 50%;
}
#slider_2 img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider_2 a {
border:0;
display:block;
}
#slider_3 {
position:relative;
width:568px;
height:268px;
background:url (images/loading.gif) no-repeat 50% 50%;
}
#slider_3 img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider_3 a {
border:0;
display:block;
}После слайдера добавляем скрипт:
<script type="text/javascript">
$ (window).load (function () {
$ ('#slider').nivoSlider ({ pauseOnHover:false });
setTimeout (function (){
$ ('#slider_2').nivoSlider ({ pauseOnHover:false, prevText: '', nextText: '',
});
}, 1000);
setTimeout (function (){
$ ('#slider_3').nivoSlider ({ pauseOnHover:false });
}, 2000);
});
</script>