При написании статьи по Nivo Slide возник вопрос, как разместить несколько Nivo Slide на одной станице. Вопрос решился и делимcя с Вами.

Бывает случаи, когда надо установить несколько слайдеров на одной странице. Проблем с установкой одного слайдера нет, а вот с двумя и более возникают трудности. Устанавливаем два и более — работает только первый, отключаешь первый — работает второй и т.д. В чём проблема? Вопрос решился и делимcя с Вами.

Весь фокус заключается aв том что для каждого слайдера нужно установить свои уникальные значения.

В <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="" 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= "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>

02.08.2011, 2604 просмотра.