How to increment variable when the btnNext is clicked while using jcarousellite?

Question

I'm trying to get my variable to increment when the btnNext is clicked. Then when the counter reaches the length of my array I want to redirect to another page. So when the last image is shown and the btnNext fires again then it will redirect, but I can't get it working.

I've tried using a do/while loop..

$(function () {
        var myLiCount = $("li").length;
        var counter = 1;
        do {
            $(".nonCircular .carousel").jCarouselLite({
                btnNext: ".next",
                visible: 1,
                circular: false
            });
            counter = counter + 1;
        } while (counter != myLiCount);
        window.location.href('http://www.google.com');
    });

all that did was show the image for 2 seconds then redirected, so then I tried this...

$(function () {
        var myLiCount = $("li").length;
        var counter = 1;

            $(".nonCircular .carousel").jCarouselLite({
                btnNext: ".next",
                visible: 1,
                circular: false
            });
            counter = counter + 1;
        if(counter == myLiCount)
        window.location.href('http://www.google.com');
    });

but that didn't work either, it would get to the last image and do nothing after that.

I know for this to work I have to somehow increment on the btnNext click, but don't know how.

Thanks

Answer 1

Try this

$(function () {
    $(".nonCircular .carousel").jCarouselLite({
        btnNext: ".next",
        visible: 1,
        circular: false
    });
    var counter = 1;
    $('.next').on('click', function () {
        counter = counter + 1;
        if (counter == $("li").length)
            window.location.href('http://www.google.com');
    });
});