Question

I am creating my own carousel which moves one step to the left or right depending on what button was clicked. That part of the code works as expected hence i have not included it here

What i am unable to accomplish is to automate or rotate the carousel when the page loads up. That is after every 4 or 5 seconds the current active element should move to the next.

The code below shows my current attempt.

$('.promo-nav').show();
function rotate() {
    var showid = 0;   
    if(!$(this).parent().parent().hasClass('active')){              
        id = $(this).parent('li').index();              
        $(this).parent().parent().children('li.active').removeClass('active');
        $(this).parent().addClass('active');
        $(this).parent().parent().parent().parent().parent()
            .children('.promo-carousel-content').css({'display':'none'})
            .eq(id).css({'display':'block'});
    }
}
window.setTimeout(rotate, 400);

//css
.promo-carousel {display: block;} 
.content {display: none;}   
.content.first {display: block;}


//markup 
<div class="grid_4"> 
    <div class="promo-carousel"> 
        <div class="content first"> 
             //some content 
        </div> 
    </div> 
    <div class="promo-nav"> 
        <div> 
            <div class="prev"> 
                <a href="#"><span class="hide">previous</span></a> 
            </div> 
            <ul> 
                <li class="active"><a href="#"><span class="">first</span></a></li>
                <li><a href="#"><span class="">second</span></a></li>
                <li class="circle"><a href="#"><span class="">third</span></a></li>
                <li class="circle"><a href="#"><span class="">fourth</span></a></li>
            </ul>
            <div class="next"> 
                <a href="#" class=""><span class="hide">next</span></a>   
            </div>              
        </div>              
    </div>   
</div> 

Answer 1

Are you looking for something like this?

$(document).ready(function() {
    $('.promo-nav').show();
    setInterval(rotate, 4000);

    function rotate() {
        var showid = 0;
        $('.promo-nav').find('li').each(function() {

            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                if ($(this).next().length == 0) {
                    id = $('.promo-nav').find('li:first-child').index();
                    $('.promo-nav').find('li:first-child').addClass('active');
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({
                        'display': 'none'
                    });
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({
                        'display': 'block'
                    });
                    return false;
                } else {
                    id = $(this).next().index();
                    $(this).next().addClass('active');
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({
                        'display': 'none'
                    });
                    $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({
                        'display': 'block'
                    });
                    return false;
                }
            }
        });
    }

});