Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jQuery Slider without stopping

jQuery Slider without stopping


I'm making a Jquery Slider using sliced images to look like one looong sliding banner:


Two issue I'm having:

1) The third image in the sequence loads too late

2) It stops between slides - but I don't want it too

Any ideas why? Thanks :)

Problem courtesy of: Dave


var showing = 0, // current img
    imgs = [], // all imgs
    $img = $("#gallery img"), // jQuery DOM object
    imgWidth = $img.outerWidth(), // img width assuming every img has same
    $slider = $("#slider"),
    $title = $("#title");

imgs = $img.toArray();
  // Variable to store number of images
var numberOf = imgs.length;
  // set slider width so floated elements line up

  // Recursive next image function
var nextImage = function() {
    var $nextImg = $(imgs[showing++ % numberOf]);
      // Add next image (only use increment once!)
      // Show image title
        .attr("href", $nextImg.attr("src"));        
      // Animate the slider
        left: '-='+imgWidth
    }, 8000, 'linear', function() {
          // Reset CSS
        $slider.css("left", 0);            
          // Call animationg function again
  // Call next image for the first time

Updated with everything and stuff...

Solution courtesy of: Simon


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jQuery Slider without stopping


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription