Search code examples
javascriptjquerycssnivo-slider

Nivo Slider: slider disappears after last slide and shows up again after 30 seconds or so. Why?

I'm having a problem with NivoSlider. The whole slider disappears after last slide (I'm using 3 at the moment, but I can change it anytime) and shows up again after 30 seconds or so.

<div id="slider-container">
<div id="slider" class="nivoSlider theme-default">
    <img src="img/slider/slider1.jpg"/>
    <img src="img/slider/slider2.jpg"/>
    <img src="img/slider/slider3.jpg"/>

<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$('#slider').nivoSlider({
effect:'fade'
});
});
</script>
</div>
</div>

See it live: http://pandartt.com.br/novosite

What am I missing? Couldn't find a fix for it yet.

Thank you,

Giovanna

Solution

  • Move your script and link elements outside of #slider. Nivoslider thinks that they are slides and is trying to display them as slides number 4, 5, 6 and 7.

    Currently your markup looks like this:

    <div id="slider" class="nivoSlider theme-default">
    <img src="img/slider/slider1.jpg"/>
    <img src="img/slider/slider2.jpg"/>
    <img src="img/slider/slider3.jpg"/>
    <link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>                           
    <script type="text/javascript">
        $(function() {
        $('#slider').nivoSlider({
        effect:'fade'
        });
        });
    </script>
</div>

    See how the link and script elements are nested inside the #slider div? Changing the markup to this should do the trick:

    <div id="slider" class="nivoSlider theme-default">
    <img src="img/slider/slider1.jpg"/>
    <img src="img/slider/slider2.jpg"/>
    <img src="img/slider/slider3.jpg"/>
</div>
<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>                           
<script type="text/javascript">
    $(function() {
    $('#slider').nivoSlider({
    effect:'fade'
    });
    });
</script>

    Even better, move the links to your stylesheets to the head of the document, and move your scripts either to the head of the document, or just before the closing body tag.