Help with animation

Question

I've used the "FeatureList" Jquery Plugin to make my own content slider.

The script can be found here: http://pastebin.com/7iyE5ADu

Here is an exemplificative image to show what I'm triyng to achieve: http://i41.tinypic.com/6jkeq1.jpg

Actually the slider add a "current" class to an item (in the example the squares 1,2 and 3) and for each thumb show a content in the main area.

In the example, with an interval of 2 seconds, the script switch from 1 to 2, from 2 to 3, and so on.

I'd like to make a continuous animation of the thumbs, anyone can help me?

Answer 1

UPDATED

DEMO: http://jsbin.com/aqovu3/7

you don't need the FeatureList for make this! ;-)

you can do it by just using it's HTML and it's CSS and a little bit of Js like this:

$(function () {
    //go trought each LI
      $('#tabs > li').each(function (i) {
    // and Add incremental ID to each one...
        $(this).attr('id', i + 1);

      });
    //set interval... and call function
      setInterval('swapImages()', 2000);

    });

    function swapImages() {
    //count all LI's
      var total_lis = $('#tabs > li').size();
    // get the current LI ID based on where .current class...
      var start_pos = parseInt($('#tabs li a.current').parent().attr('id'));

    //remove the .current class for this LI...
      $('li#' + start_pos).children().attr('class', '');

     //calculate next LI ID...
      var next_pos = (start_pos < total_lis) ? start_pos + 1 : 1;


    //add .current class to the new LI
      $('li#' + next_pos).children().attr('class', 'current');

    // monitor the position of current LI, if 3th OR multiple of the total do the magix...
      if ((start_pos == 3) || (start_pos % total_lis == 0) || (next_pos == total_lis) ) {

        $('li#' + next_pos).prevAll().andSelf().attr('class', 'faded').fadeOut(200);
        $('li#' + next_pos).nextAll('.faded').andSelf().attr('class', '').fadeIn(200);

      }

    //Append some stuff ...
      $('#output li').find('*').fadeOut(200).remove();
      $('#output li').fadeIn(200).append('<img src="http://jqueryglobe.com/labs/feature_list/sample' + next_pos + '.jpg" />' + '<a href="#">See project details</a>');

    }​

Hope this help!