Question

i need two different sliders 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..

Answer 1

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.