Home/ Questions/Q 8640375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:15:53+00:00

I want to make simple jQuery fading carousel with simple pagination. Everything works well.

  • 0

I want to make simple jQuery fading carousel with simple pagination.
Everything works well. But when I click NEXT button the Carousel returns to the first item every time.

How to fix this issue?

The Fiddle

In case the fiddle goes stale, see my HTML:

<body>    
    <ul id="carousel">
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide1.jpg" width="960" height="375" alt="image 1" /></li>
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide2.jpg" width="960" height="375" alt="image 2"  /><li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide3.jpg" width="960" height="375" alt="image 3"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide4.jpg" width="960" height="375" alt="image 4"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide5.jpg" width="960" height="375" alt="image 5"  /></li>
    </ul>
<span class="prev">prev</span>
<span class="next">next</span>
</body>

and script:

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var showing = $('#carousel .is-showing');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');

    showing.fadeOut(800, function() {
        next.fadeIn(800).addClass('is-showing');
    }).removeClass('is-showing');
    setTimeout(slideShow, 5000);

    $(".next").click(function() {
        showing.fadeOut(800, function() {
            next.fadeIn(800).addClass('is-showing');
        }).removeClass('is-showing');
    })
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll need to rewrite some code to figure that out.
    Split repeating actions in functions.

    Fixed example

    New Script:

    $(document).ready(function() {
    slideShow();
});

function slideShow() {
    var slides = $('#carousel li');
    var previousIndex = 0,
        currentIndex = 0,
        timer;
    slides.hide().removeClass('is-showing').eq(currentIndex).show().addClass('is-showing');

    function nextSlide() {
        previousIndex = currentIndex;
        if (currentIndex < slides.length - 1) currentIndex++;
        else currentIndex = 0;
        switchSlides();
    }

    function switchSlides() {
        slides.eq(previousIndex).removeClass('is-showing').fadeOut(300, function() {
            slides.eq(currentIndex).addClass('is-showing').fadeIn(300);
            autoRotate();
        });
    }

    function autoRotate() {
        clearTimeout(timer);
        timer = setTimeout(nextSlide, 5000);
    }

    autoRotate();
    $(".next").click(nextSlide);
}​
    • 0