Why does one of my slides randomly disappear in this slideshow?

Question

Its very annoying and is causing me to lose my mind. I can't for the life of me figure out why this is happening.

Here's the link

I am using the ResponsiveSlides plugin for the slider - where I would ASSUME that once it reaches the end of the slide, it repeats back to the first slide.

Instead, it seems to get to the end of the slideshow, then shows a blank slide, THEN repeats back to the first slide.

This same effect happened when I attempted to use the Orbit slider. AND when I attempted to use another slider.

I'm convinced its not the slider plugins' fault (I doubt all 3 slider plugins randomly show a blank slide at the end of the slideshow).

Things I've thought of / tried: - Thought maybe one of the images was broken... nope. Here's my markup:

<!-- begin slider -->
<div class="slider">
    <ul class="rslides">
        <li><img class="slider-image" src="images/slider1.jpg" alt="Slider Picture 1 - Kilmarnock by the Sea" id="slider1"></li>
        <li><img class="slider-image" src="images/slider2.jpg" alt="Slider Picture 2 - Kilmarnock by the Sea" id="slider2"></li>
        <li><img class="slider-image" src="images/slider3.jpg" alt="Slider Picture 3 - Kilmarnock by the Sea" id="slider3"></li>
        <li><img class="slider-image" src="images/slider4.jpg" alt="Slider Picture 4 - Kilmarnock by the Sea" id="slider4"></li>
        <li><img class="slider-image" src="images/slider5.jpg" alt="Slider Picture 5 - Kilmarnock by the Sea" id="slider5"></li>
        <li><img class="slider-image" src="images/slider6.jpg" alt="Slider Picture 6 - Kilmarnock by the Sea" id="slider6"></li>
        <li><img class="slider-image" src="images/slider7.jpg" alt="Slider Picture 7 - Kilmarnock by the Sea" id="slider7"></li>
    <li>
</div>
<!-- end slider -->

And my JavaScript:

$(function() {
    $('.rslides').responsiveSlides({
        auto: true,
        speed: 500,
        random: true,
        timeout: 2500
    });
});

Every single one of those images exists on the server, and there's no 404 in the console as if I'm trying to access an image that doesn't exist.... and yet: the slider still shows a blank slide!

Anyone have any idea?

Answer 1

You've written <li> instead of </ul>. This gets parsed as an extra list element, and you get an extra empty slide.