cannot use two nivo sliders in webpage

i need two different s开发者_如何学JAVAliders for my webpage. on clicking an icon one will be displayed and on clicking the other icon, the first slider will disappear and the next one with appear in its place. the slider i use is nivo slider( a jquery slider). but the problem is, only the first slider( the slider that is written first in the html code) is displayed. for the second one, the layout is displayed and the loading gif is shown. there isnt any problem with the images( i could see them using firebug). wen i reorder the sliders, it happends again..only the slider written first in the code is displayed. the problem is with the sliders id. because i hav to make a copy of the same code, the id is repeated. but only one instance of the code is present at any time. the slider code is

<div id="techimageslides">
   <div id="slider-wrapper">
       <div id="slider" class="nivoSlider">
           /* images */                            
       </div>
   </div>
</div>

ive tried with different ids, but it doesnt work. even the layout isnt displayed with diff ids(changed in css too).. i think its used in d javascript of the slider

please suggest a way to get it to work..

Basically you just need to change the ID and follow the classes styling them in CSS

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

<div id="slider2" class="nivoSlider">
    <src="../yourimage/images/img1p.png" alt="" title="Caption 1" /></a>
</div>

then in the area

<script type="text/javascript">
*$(window).load(function() {
    $('#slider').nivoSlider();
    setTimeout(function(){
            $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
    }, 1000);
});
</script>

You are practically right. The nivo slider is being controlled in the jquery.nivo.slider.pack.js

If you check the demo and practically copy what it's done you can get it to work.

Rather than changing the ID of the div in which the slider is displayed, A better option would be to select the div with the class rather than the id in javascript.

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

if your div has id="slider" and class="nivoSlider" you should use it like this

<script type="text/javascript">
*$(window).load(function() {
    $('.nivoSlider').nivoSlider();
         //code of displaying slider here
    });
});
</script>

look for this script in the nivo slider php file and replace the selector with what i have written. Hope this helps

Just give them different ids and than call them both. Their separate id will stop them from conflicting here i used same method on elasti slider

<div class="photo">
<div class="head2">
<h2>Photo Gallery</h2>
</div>
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>
</div>
<div class="photo">
<div class="head2">
<h2>Video Gallery</h2>

<ul id="carousel2" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>


</div>

enter code here

and calling them like

<script type="text/javascript">

$( '#carousel' ).elastislide();
$( '#carousel2' ).elastislide();
</script>