Chat with Thomas | Profile

Welcome to the Modern Web Design.

📖 Building images slideshow

(The content is extracted from jQuery lab 2)

Slideshow screenshot

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

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="

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="