JQuery image slider and JQuery image carousel

Something visual this week. Before I introduce the code behind the effect, let’s show you the image slider in action:

JQuery image transition effects

Give it about 6 seconds to start. Nice isn’t it?

This uses JQuery along with a really well written plugin called JQuery-Cycle (see link to the right of this page).

JQuery-Cycle home page

You simply include two javascript files, one for the plugin and the other adds about 25+ effects including sliding, zooming, turning and fading of images.

The images themselves are includes within a div. That’s it. Take a look at the code behind this page to see how it works.

A JQuery Infinite carousel

I discovered the second effect after looking through quite a number of different JQuery plugins, none of which did quite what I was looking for. On a client’s homepage, I needed to show a series of featured products for sale. The user should be able to click left and right to navigate the available products. When they reach the last product, the images should continue from the start.

Here’s the result:

You can find the link to the code and a tutorial to the right of the page.

Infinite Carousel home page

Bookmark this article...