javascript - 2 Nivo Sliders on same page not working -
for reason can not see, have 2 nivo sliders on same page not work. appreciated. below known nivo slider code adapting.
header
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" /> <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" /> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
nivo slider 1
<div id="wrapper"> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoslider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/> </div> </div> </div>
nivo slider 2
<div id="wrapper"> <div class="slider-wrapper theme-default"> <div id="slider2" class="nivoslider2"> <em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="hello, name daisy , mobile beauty specialist covering cambridge area." data-transition="fade" /> <img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="my clients know when come me, service , want. can face gets noticed in crowd." data-transition="fade" /> <img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="however not specialist in applying make-up, offer luxury manicures , pedicures, sienna x spray tanning, massages , lot mot" data-transition="fade" /> <img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="this example of caption" data-transition="fade" /> </em></div> </div> </div>
javascript
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoslider({pausetime:10000}); $('#slider2').nivoslider({pausetime:5000}); effect:'fade' }); </script>
please change <div id="wrapper">
1 of slider , check.
note: shouldn't have same id's both div's(not divs) anytime.
Comments
Post a Comment