Перед тем как читать статью советуем прочитать предыдущую статью.
При написании статьи по установке слайдера Nivo Slide возник вопрос, как разместить несколько Nivo Slide на одной станице. Бывает случаи, когда надо установить несколько слайдеров на одной странице. Проблем с установкой одного слайдера нет, а вот с двумя и более возникают трудности. Устанавливаем два и более - работает только первый, отключаешь первый - работает второй и т.д. В чём проблема? Вопрос решился и делим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" />
<!-- файл css для слайдера -->
<!-- файлы 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>
<!-- файлы js -->
Пишем код слайдеров не забывая изменять размеры картинок (если разные темы) и имена.
<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="" title="Это пример использования текста" />
<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="slider2" 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="slider3" 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;
}
#slider2 {
position:relative;
width:630px; /* Изменить размер картинки */
height:235px; /* Изменить размер картинки */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider2 img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider2 a {
border:0;
display:block;
}
#slider3 {
position:relative;
width:568px; /* Изменить размер картинки */
height:268px; /* Изменить размер картинки */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider3 img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider3 a {
border:0;
display:block;
}
После слайдера добавляем скрипт:
<script type="text/javascript">
$(window).load(function() {
$('#slider1').nivoSlider({ pauseOnHover:false });
setTimeout(function(){
$('#slider2').nivoSlider({ pauseOnHover:false, prevText: '', nextText: '',
});
}, 1000);
setTimeout(function(){
$('#slider3').nivoSlider({ pauseOnHover:false });
}, 2000);
});
</script>
