How to Auto slide with jQuery...

Question

how can i auto slide this slider link text i have little knowledge on jQuery and less on how to do this. the thing is that this slider slides when i click on an image but i also want this to start sliding automatic and when i hover on it it stops / pause sliding and then when i point my mouse out it continues sliding...

here is wat im using to slide the images on click

jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
      current: 2,
      beforeCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '40px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '40px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      currentCss: function( el, container ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
        ];
      },

 }); });

I would be grateful if someone can help me with this...

Answer 1

I thing something like this should work:

jQuery(function() { //This is the same that document ready. If you already are in document ready function you shouldnt put this line.
  var move = true;
  jQuery("#flip").hover(function() {
    move = false;
  }, function() {
    move = true;
  });

  setTimeout(function() {
    if(move) {
      var eq = $("#flip").find("li").index($("#flip").find("li.current"));
      eq++;
      if ($("#flip").find("li:eq(" + eq + ")").length == 0)
        eq = 0;
      $("#flip").find("li:eq(" + eq + ")").click();
    }
  }, 600);
});

The current li should have "current" class.

The last update:

You had this code in the change event:

jQuery('#scrollbar').slider('value', ui.to -1);

It does not work, don't know why. Add in cahnge event this lines (before the one you already have because it throws error):

jQuery('#flip li.current').removeClass("current");
jQuery('#flip li:eq(' + ui.to + ')').addClass("current");

Also I made some changes to my code so that when it ends it start moving back. Here it is:

var move = 1,
    moving = true;
  jQuery("#flip").hover(function() {
    moving = false;
  }, function() {
    moving = true;
  });

  setInterval(function() {
    if(moving) {
      var eq = $("#flip").find("li").index($("#flip").find("li.current"));
      if(move == 1)
        eq++;
      else
        eq--;
      if(eq == -1) {
        eq = eq + 2;
        move = 1;
      }
      if ($("#flip").find("li:eq(" + eq + ")").length == 0) {
        eq = eq - 2;
        move = 0;
      }
      $("#flip").find("li:eq(" + eq + ")").click();
    }
  }, 600);