jQuery Sliding Banner Tutorial

As a part of the jQuery training course that we run, students are asked to build a simple jQuery sliding banner. The idea behind this is to familiarise students with the jQuery .animate() method and to give them some additional practise in changing attributes using the .attr() method.

Once a simple sliding banner is created, it is not too difficult to then enhance what they have by turning their code into a jQuery Plugin. This tutorial is designed for those that want to take what was learned from the jQuery training and build a stand-alone sliding banner.

The main idea behind the code for this banner is to keep things reasonably concise while still having some ability to change the speed and interval of the sliding banner. The banner has no rounded corner options, image based next and previous buttons or links, or text based captions. The point of the banner code is to be small and portable.

The code is explained in detail below, but a zipped up version of the banner code with sample HTML, CSS and images is available from the download link for those that just want to get started using the banner.

Download Source Code | View Demo with Push Off | View Demo with Push On

If you find this code useful, please help support us to promote our work by clicking on the Facebook button on the left hand side of this page. Thank you.

jQuery Course Trainer

Bjorn has been involved in CSS based web design for nearly 20 years and has experience developing web applications in both small and large teams of developers.

Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.