jCarousel Lite is a classic and very light weight jquery plugin.

It’s properties include : orientation (horizontal or vertical), how many images are displayed at a time, various ‘easing’ motion effects and more.

The reason I like it is that of all image carousel plugins for jQuery it is the easiest to tweak, plus – it’s really lightweight.

Most image sliders are built to work well with images that have the same width. The reason is that the container width of each of the images is defined by the width of the first image.

jcarousel lite

If you want jCarousel Lite to work with images that have different width, you need to do some changes. Let’s see what options we have:

  • First and easiest: place the widest image in the gallery in the first position.
  • If you don’t wont to change the image order, you can do a small js change (the following change is recommended only if you use jCarousel Lite for a single gallery in your site!):

    First, download the uncompressed version of the plugin from the site.
    Second, search for “width(el)” (in the version I tested, 1.01, it’s line 134) and change the ’0′ digit inside the parenthesis to the ordinal number number of your widest image, minus 1 (e.g. if your widest image is the third one, put ’2′ instead of the ’0′).

  • If you don’t want to change the image order and you also prefer not to deal with javascript code, you can simply widen the layout size of the first image in your gallery. That is, without changing the actual visible image size. To do this, in photoshop change the Canvas Size by going to Canvas Size –> Width).

To conclude: I definitely recommend this plugin because it provides some nice features with ease and without burdening the site loading speed. To read more and download the plugin click here.

What about you? do you use this plugin or rather use different ones? how did you manage a to display a slideshow for images with different sizes?

Topics:   |