Date: 1 Feb 2010 Comments: 0

I wanted to create some automatic scrolling list of most popular articles in the home page.

I found a jQuery plugin – jCarousel, it was everything I want. The example, I liked most was Carousel with external controls.

Here’re few tips how to integrate jCarousel in your website:

1. Reduce the number of javascript and css files

When you open the example page, in the head tag you can see  includes of 3 css files (style.css, jquery.jcarousel.css and skin.css), 2 js files (jquery-1.2.3.pack.js and jquery.jcarousel.pack.js), additional styles for the controls and some js code for initCallback callback. All of this css and js code can be moved in 2 files: 1 css and 1 js.

Note: when you move all code in one js file, it’s very important it to be moved in the same order as the included files. Also, when you move the content from jquery-1.2.3.pack.js, add ‘;‘ in the end of its content

2. Delete the images if they are not necessary

In the css file you can see classed that use images files. If you don’t need these files (ex. images for ‘prev’ and ‘next’), just delete them.

3. Remove the unnecessary code

In the css file there are too much classed that you wouldn’t need. Ex. if you use vertical position of your items list, you don’t need to keep classes for horizontal items list. Also, you could remove the unnecessary js code. Ex. I didn’t want to use prev and next buttons, so I delete all instances and code that uses buttonNextHTML, buttonPrevHTML, buttonNextEvent, buttonPrevEvent, buttonNextCallback, buttonPrevCallback.

4. clear the comments, too

You can see also a lot of comments in the js code. If we clear them, the code will work in the same way, but the file size will be less, which will allow it to be loaded by the visitor’s browsers faster So, I deleted all comments in code.

Instead of manual deleting of the comments you can use the Reduce Code Size Tool, it’ll remove all comments for you

I think jCarousel is a great jQuery plugin. But, if there’s a functionality that I don’t need for my purposes, I think it’s a good idea to remove it and to optimize the script loading to be faster