How to stop my blank div appearing after click of previous button?

Question

So i have coded a very simple slideshow with previous and next buttons.

However, if you press the previous button the slider works but then slides onto a blank div...

NOTE: let the slider load press the left grey button and then let the slideshow continue... there is a blank div

How do i fix this problem, and what is causing the problem?

JS fiddle: https://jsfiddle.net/z93tyrtx/

 $("#slider > div:gt(0)").hide();

    // fade out current slide (first), fade in next slide and move first slide to end
    var nextSlide = function () {
        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");
    }

    var nextSlideTimer = setInterval(nextSlide, 5000);

    // fade out current slide (first) and move last slide to top and fade in
    $("#prev-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000);
        $("#slider > div:last")
        .fadeIn(1000)
        .prependTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

    $("#next-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

let the slider load press the left grey button and then let the slideshow continue... there is a blank div — John Vaughan, Mar 31 '15 at 14:46

score 0 · Accepted Answer · answered Mar 31 '15 at 14:53

0

I think your problem is that .prependTo in prev button click is actually inserting the last div before a tag, but is should insert after it.

Just replace

.prependTo("#slider");

To

.insertAfter("#slider > a#next-button");

Check this fiddle

answered Mar 31 '15 at 14:53

Sam

4,302
12
40
74

Thank you, it was very obvious now that I look at it – John Vaughan Mar 31 '15 at 14:57

score 0 · Answer 2 · answered Mar 31 '15 at 15:27

Your problem is because the buttons inside the sliders should be outside or change your order "prependTo" in the prev button. When you order to "prependTo", then the div go over the buttons and it breaks the positions. Get the buttons outside the Slider, and it will be ok.

score 0 · Answer 3 · edited Apr 20 '21 at 05:50

Your problem is that the previous code button the divs are being inserted before a buttons so when the nextButton or nextSlide function is executed and reached the last div,this find the a button instead of div element therefore it shows a blank div.

in this part of code i think is unnecessary set the setTimeout because you already used the setInterval and also why the nextSlideTimer value is a number not a function .

 nextSlideTimer = setInterval(nextSlide, 5000)
 setTimeout(nextSlideTimer, 5000)

you can find a good explication and examples in these links:

stackoverflow.com/settimeout-or-setinterval

javascript.info/tutorial/settimeout-setinterval

How to stop my blank div appearing after click of previous button?

3 Answers3