Два и более Nivo Slider на одной странице

Бывает случаи, когда надо установить несколько слайдеров на одной странице. Проблем с установкой одного слайдера нет, а вот с двумя и более возникают трудности. Устанавливаем два и более — работает только первый, отключаешь первый — работает второй и т.д. В чём проблема? Вопрос решился и делим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>

Возврат к списку

Готовые сайты