by Dave Reeder
1. July 2009 00:51
jQuery is extremely popular now and one effect that I seem to be using time and time again is the slider. Or Glider or Carousel depending on what you want to call it!
So there are multiple names for this effect and certainly multiple ways of doing it. I will choose the term "slider" to make things easier for the purpose of this article.
Essentially what happens is you can show various different "pieces" of content that glide. These are normally various images or divs with content in.
If your content is images, these slider can be used as a gallery. If you choose more than just images, such as text etc then you can present a lot of information in a very small area.
Below is a little information about some sliders I have found and used:
Featured Content Glider
An old favourite of mine, this jQuery based glider is very versatile and easy to get up and running. very easy to customise as options such as speed and direction are added in a little script on the page.
See the example
jCarousel
A very impressive plugin. Quite Easy to get up and running although styles are a bit tricky to get your head around at first.
You'll need firebug to check what is being written out as this plugin writes out a lot of HTML on the fly.
The jCarousel is a very nicely implementation and Uses classes to initiate multiple sliders of that type. Easy to change settings such as "autoplay" etc. I like the way the autoplay continues even after you have clicked an arrow. Can be made vertical - overall a very flexible plugin.
Different controls can be added such as numbered links for each item in the carousel etc.
Here is an example of multiple sliders on one page: See the example
Coda Slider
Nice animation using jquery easing, has tabs and guidance arrows. The CSS is easy to customise and well commented. The HTML is also very straightforward and easy to get your head round.
See the example