Autoplay for javascript moving boxes

Question

Hi all,

Please go to : http://gati.simptome-remedii.ro/ . As you can see there is a carousel effect in the header and it goes forward and backwards once you click on the arrows or press left/right key . I need it to autoplay so I need an autosliding effect. Time interval should be 5 seconds ( I guess I can set that up later ) .

This carousel effect uses jquery-1.3.1.min.js and slider.js .

Slider.js

$(function() {

 var totalPanels   = $(".scrollContainer").children().size();

 var regWidth   = $(".panel").css("width");
 var regImgWidth   = $(".panel img").css("width");
 var regTitleSize  = $(".panel h2").css("font-size");
 var regParSize   = $(".panel p").css("font-size");

 var movingDistance     = 300;

 var curWidth   = 350;
 var curImgWidth   = 220;
 var curTitleSize  = "15px";
 var curParSize   = "15px";

 var $panels    = $('#slider .scrollContainer > div');
 var $container   = $('#slider .scrollContainer');

 $panels.css({'float' : 'left','position' : 'relative'});

 $("#slider").data("currentlyMoving", false);

 $container
  .css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
  .css('left', "-350px");

 var scroll = $('#slider .scroll').css('overflow', 'hidden');

 function returnToNormal(element) {
  $(element)
   .animate({ width: regWidth })
   .find("img")
   .animate({ width: regImgWidth })
      .end()
   .find("h2")
   .animate({ fontSize: regTitleSize })
   .end()
   .find("p")
   .animate({ fontSize: regParSize });
 };

 function growBigger(element) {
  $(element)
   .animate({ width: curWidth })
   .find("img")
   .animate({ width: curImgWidth })
      .end()
   .find("h2")
   .animate({ fontSize: curTitleSize })
   .end()
   .find("p")
   .animate({ fontSize: curParSize });
 }

 //direction true = right, false = left
 function change(direction) {

     //if not at the first or last panel
  if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } 

        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {

   $("#slider").data("currentlyMoving", true);








   var next         = direction ? curPanel + 1 : curPanel - 1;
   var leftValue    = $(".scrollContainer").css("left");
   var movement  = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;

   $(".scrollContainer")
    .stop()
    .animate({
     "left": movement
    }, function() {
     $("#slider").data("currentlyMoving", false);
    });

   returnToNormal("#panel_"+curPanel);
   growBigger("#panel_"+next);

   curPanel = next;

   //remove all previous bound functions
   $("#panel_"+(curPanel+1)).unbind(); 

   //go forward
   $("#panel_"+(curPanel+1)).click(function(){ change(true); });

            //remove all previous bound functions               
   $("#panel_"+(curPanel-1)).unbind();

   //go back
   $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 

   //remove all previous bound functions
   $("#panel_"+curPanel).unbind();
  }
 }




 // Set up "Current" panel and next and prev
 growBigger("#panel_3"); 
 var curPanel = 3;

 $("#panel_"+(curPanel+1)).click(function(){ change(true); });
 $("#panel_"+(curPanel-1)).click(function(){ change(false); });

 //when the left/right arrows are clicked
 $(".right").click(function(){ change(true); }); 
 $(".left").click(function(){ change(false); });

 $(window).keydown(function(event){
   switch (event.keyCode) {
   case 13: //enter
    $(".right").click();
    break;
   case 32: //space
    $(".right").click();
    break;
     case 37: //left arrow
    $(".left").click();
    break;
   case 39: //right arrow
    $(".right").click();
    break;
   }
 });



}


);

I am really looking forward to receiving an answer.

Thank you !

Regards, Razvan.

Answer 1

how can I get the script to skip the auto and just let it go back to the first image when i reach the last image by clicking right button?

Answer 2

Although the autoplay above works, the new code to make it go start from the beginning doesn't. Well it does bring you back to the beginning, but the spacing is messed up for some reason. I've messed around with it but can't figure it out. Too bad it can't just loop around forever.