Have you ever wondered how to setup your own cool rotating & autoslide banners with pagination – those small buttons with 1, 2, 3 to switch between your website banners – especially on homepage? If so, then jQuery Carousel is an excellent jQuery plugin to do just that! It is simple to use and works perfectly.
- Add the following to the head section of your HTML markup. Ofcourse, you’ll need to update the path to point to your copy of the required files (which can be downloaded above).
- Add the following to the body section of your HTML markup. This includes your banner files and their respective links. Don’t forget to apply your CSS styles to class “foo” and it’s child HTML tags.
<div class="foo"> <ul> <li><a href="/link/for/banner1"><img src="/path/to/banner/1.jpg" width="900" height="300" alt="Banner 1"></a></li> <li><a href="/link/for/banner2"><img src="/path/to/banner/2.jpg" width="900" height="300" alt="Banner 2"></a></li> </ul> </div>
And that’s all there is to it. Fire up that web browser to see it in action!
There are several more settings which you can play around with to adjust this to your liking. You can visit jQuery Carousel page for more information on it.
I’d love to hear from you with links to see your application of this effect.