📖 Building images slideshow

(The content is extracted from jQuery lab 2)

The following steps show how we can build an image slideshow by using jQuery and CSS transition.

• Step 1: Images list in HTML
• Step 2: Basic CSS
• Step 3: Adding jQuery
• Step 4: Animating with CSS
• Extra: Animating style 2
• Extra: Animating style 3

In step 1, we defined the images list in HTML. It shows that we are listing a collection of content by using the HTML list structure.

In step 2, we style the slideshow layout with CSS position property. There is no any slideshow yet.

In step 3, we add the jQuery logic which rotate the images in a time interval.

In step 4, we animate the slideshow with CSS transition and transform.

In extra steps, we explore other animating styles by only changing the CSS.

Taking the code further

This slideshow example provides a solid foundation. This is production ready and can be modified to fit different usages in your next web projects.

1. Try creating your own images sliding animation by only changing the CSS. Keep in mind that we avoid defining styles in JavaScript.
2. Try to add a next/previous slide switching feature. This can be done by listening to the click event of a next/previous button and changing the currentIndex variable to show next or previous slide.
3. Can we replace the image with HTML elements in each slide? Here is an example of having h2 and text in slide 1: <a href="http://codepen.io/makzan/pen/dPgQrb

More examples

Here is a lucky draw effect that I created using similar technique. I used it to randomly selected one student to answer question in my previous class.

<a href="http://codepen.io/makzan/pen/WbeXRq