Jiangyue Zhu

Impossible is Nothing

1 Comment

Implement a carousel effect by using jQuery

In this post, I am gonna share my experience of implementing a carousel effect just like slide effect using jQuery. I have ever done this using prototype.js. But, due to my own preference, I like do the same thing again using jQuery since it is really amazing, expecially for the animation part.

Basically, I wrote a jQuery plugin which enable elements invoke it easily. Before we do anything, we should have a HTML structure just like what shown below, presenting the basic contents we want to show.

For the css, please take this as reference:

In the <script></script>, access to the <section> element and call carousel plugin, then everything is set.
To view the live result, please click this url: http://www.sis.pitt.edu/~jizhu/carousel/index.html
And for the source code, please go to my repository located in GitHub: https://github.com/zhujy8833/Carousel