Question

Ive been writing a simple jquery function that turns a div with a list of images into a carousel. Here is the markup..

<div id="carousel">
  <ul>
   <li><img src="images/music1.jpg" /></li>
   <li><img src="images/music2.jpg" /></li>
   <li><img src="images/music3.jpg" /></li>
  </ul>
 </div>

and in my carousel.js file i have the follow function..

//Function turns a div with a list of images into a carousel
//=====
jQuery.fn.makeCarousel = function({slideWidth, numSlides, transTime, interval}) {
 //== Get Element and store id==//
 var id = $(this).attr("id");
 var element = "#" + id;

 // Function
 setInterval(function(){
  //Store Variables
  var currentLeft = $(element + ' ul').css("left");
  var left = parseFloat(currentLeft, 10);
  var moveBy = left - slideWidth;

  //Slide the list, and stop it being moved out of bounds
  if(moveBy < ((numSlides - 1) * slideWidth) * -1) {
   $(element + ' ul').animate({left : "0px" }, transTime);
  } else {
   $(element + ' ul').animate({left : moveBy + "px" }, transTime);
  }
 },interval);
};

Im going to tidy up the code after, im relativley new to jquery.

I then have the following in the header of the html..

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/carousel.js" type="text/javascript"></script>

 <script type="text/javascript">
  $(function() {

   $('div#carousel').makeCarousel({
    slideWidth: 500, 
    numSlides: 3, 
    transTime: 2000, 
    interval: 3000
   });

  });
 </script>

You can see ive included the jquery core, my carousel script, and then ive called the make carousel method on the div and passed some settings in.

Now, this function runs fine in firefox, but not in IE, Safari, Chrome, and Opera.

• IE says: “Object doesnt support this property or method” and points to the line above where i call “$(‘div#carousel’).makeCarousel“.

• Chrome gives 2 errors: The First says “Uncaught TypeError: Object # has no method ‘makeCarousel'” and the next says “Uncaught SyntaxError: Unexpected token {” and points to the line where i declare the function: “jQuery.fn.makeCarousel = function({slideWidth, numSlides, transTime, interval}) {“

Im at a bit of a loss with this, have i declared the function correctly? What else could it be? It works really nicely in firefox but not in anything else.

Any help with this would be greatly appretiated!
Thanks!

Tom

Answer 1

Your function definition is incorrect. It should take a list of parameters but the syntax you are using creates an object, not a parameter list.

Try this:

jQuery.fn.makeCarousel = function(options) {
  options = jQuery.extend({slideWidth : 0, numSlides: 1, transTime: 100, interval: 5000}, options);

  return $(this).each( function() {

   var $this = $(this);    
   // Function
   setInterval(function(){
      //Store Variables
      var currentLeft = $(element + ' ul').css("left");
      var left = parseFloat(currentLeft, 10);
      var moveBy = left - options.slideWidth;

      //Slide the list, and stop it being moved out of bounds
      if(moveBy < ((options.numSlides - 1) * options.slideWidth) * -1) {
           $this.find('ul').animate({left : "0px" }, options.transTime);
      } else {
           $this.find('ul').animate({left : moveBy + "px" }, options.transTime);
      }
    },options.interval);
  });
}