Question

I am attempting to add a simple indicator to my carousel. For the time being, the number of indicators doesn’t have to be dynamically generated. I am trying to replicated the carousel on the BBC homepage.

The indicator on BBC site are those orange dots on the top right.
I dont care to make the dots a link to the corresponding slide, I just want the dots to cycle according to if you click ‘prev’ or ‘next’

For example: ( o = indicator )

<prev      [IMGS]      next>
           o o o

My jsFiddle: http://jsfiddle.net/yTKyU/

Answer 1

See the updated fiddle: http://jsfiddle.net/yTKyU/1/

$(document).ready(function() {

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

//calculate width dynamically for responsive design
var starting_width = $('#slides ul li').width($('#slides').outerWidth());

//grab the width and calculate left value
var item_width = $('#slides ul li').outerWidth();
var left_value = item_width * (-1);

//move the last item before first item, just in case user click prev button
$('#slides ul li:first').before($('#slides ul li:last'));

//set the default item to the correct position 
$('#slides ul').css({
    'left': left_value
});

//if user clicked on prev button
$('#prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('#slides ul').css('left')) + item_width;

    //slide the item            
    $('#slides ul:not(:animated)').animate({
        'left': left_indent
    }, 200, function() {

        //move the last item and put it as first item                
        $('#slides ul li:first').before($('#slides ul li:last'));

        //set the default item to correct position
        $('#slides ul').css({
            'left': left_value
        });

    });
    if ($('#pagination li span.current').parent().is(':first-child')) {
        $('#pagination li span.current').removeClass('current');
      $('#pagination li:last-child').children().addClass('current');
    } else {
    $('#pagination li span.current').parent().prev().children().addClass('current').addClass('new');
    $('#pagination li span.current').removeClass('current');
    $('#pagination li span.new').addClass('current').removeClass('new');
}
    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('#next').click(function() {

    //get the right position
    var left_indent = parseInt($('#slides ul').css('left')) - item_width;

    //slide the item
    $('#slides ul:not(:animated)').animate({
        'left': left_indent
    }, 200, function() {

        //move the first item and put it as last item
        $('#slides ul li:last').after($('#slides ul li:first'));

        //set the default item to correct position
        $('#slides ul').css({
            'left': left_value
        });

    });

    //change the itemlist class
    if ($('#pagination li span.current').parent().is(':last-child')) {
        $('#pagination li span.current').removeClass('current');
      $('#pagination li:first-child').children().addClass('current');
    } else {
        $('#pagination li span.current').parent().next().children().addClass('current').addClass('new');
        $('#pagination li span.current').removeClass('current');
        $('#pagination li span.new').addClass('current').removeClass('new');
    }
    //cancel the link behavior
    return false;

});

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(

function() {
    clearInterval(run);
}, function() {
    run = setInterval('rotate()', speed);
});

});

//function to click next link
//a timer will call this function, and the rotation will begin :)  


function rotate() {
$('#next').click();
}​