2 Nivo Sliders on same page not working

Question

For some reason that I can not see, I have two nivo sliders on the same page that do not work. Help much appreciated. Below is the well known Nivo Slider code that I am 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, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a 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>

I don't know what NIVO is but having 2 elements with the same ID, is wrong `id="wrapper"`. — Ali Bassam, Mar 10 '14 at 09:33
Why do you have all of the images in the second slider wrapped in `em` tags? Also, your effect syntax is incorrect. Chances are that you're receiving a Javascript error. Check your console. — Brendan Bullen, Mar 10 '14 at 09:35

score 1 · Answer 1 · answered Mar 10 '14 at 09:38

There are a few issues here.

You have duplicate IDs. I doubt this is the problem but it's bad practice.
You have <em> tags around your images in the 2nd slider.

Finally, you have incorrectly specified your effect parameter - this is most likely the cause of the issue

$(window).load(function() {
    $('#slider').nivoSlider({pauseTime:10000});
    $('#slider2').nivoSlider({
        pauseTime:5000,
        effect:'fade'
    });
});

score 0 · Answer 2 · answered Mar 10 '14 at 09:35

0

Please change <div id="wrapper"> for one of the slider and then check.

Note: you shouldn't have same id's for both div's(not only divs) anytime.

answered Mar 10 '14 at 09:35

coder

13,002
31
112
214

2 Nivo Sliders on same page not working

2 Answers2