This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

The final result is something like this:

Introduction

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.

Introduction

Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).

So, here we go again, I separated my codes into 3 sections: html, css and javascript and I will explain how it works in each section.

Introduction

I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later – Create a thumbnail gallery with slick heading and caption effect.