Until this day, jQuery is still blowing me away with its simplicity and robustness. As you can see, I have been concentrated to produce tutorials about it, and I just couldn’t help it! Right, this time, we’re going to learn how to create a news slider that come with the following features:
- Slideshow with Image and description/caption
- previous, next, pause and play buttons
- On mouse over, pause the slideshow, and play it on mouse out
- Sliding effect for both gallery panel and excerpt panel
- Adjustable slideshow speed
- And, finally, smarter script that will calculate width and height for the slideshow
We’re going to use scrollTo jQuery plugin during the development. A huge thumb up and big thank you to Ariel Flesler who created the plugin.
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.