Simple Image Slideshow in HTML & CSS

In this tutorial, you’ll learn how to create a simple image slideshow in HTML and CSS. Basically, an image slider or auto-playing slideshow requires JavaScript function to work. But here we’ll functionalize the image slider using CSS animation to slide the images. So, you don’t need to handle JavaScript in order to create a minimal image slideshow.

This slideshow project is based on pure CSS to switch between two or multiple images with a fading effect. Before going further, check the final output of this simple slideshow on the demo page. Ok! what’s new in this image slideshow? Its really simple, lite, minimal and fast in regards to loading.

HTML for Simple Image Slideshow

The HTML structure for the slideshow is really simple. Just create a div element with the class name "container" and place your images inside it. You can add at least two or multiple images according to your needs. A very basic HTML structure for a simple slideshow is as follows:

<div class="container">
  <img class='photo'  src="img/8113424031_72048dd887.jpg" alt="Image 1" />
  <img class='photo'  src="img/8562523343_9bb49b7b7b.jpg" alt="Image 2" />
  <img class='photo'  src="img/8562729616_35b1384aa1.jpg" alt="Image 3" />
  <img class='photo'  src="img/8113424031_72048dd887.jpg" alt="Image 4" />
</div>

You can also add other HTML elements inside this slideshow container like caption text for images etc. However, you’ll need to write some extra CSS for any extra element in order to fit in the slideshow.

The CSS Styles

First of all, we’ll style the main container of the slideshow just like a frame. So, target the .container class and define its width and height as 500px and 300px respectively. You can set the custom values for both height and width according to your needs. In order to make it looks like a frame, set the border as 10px and define a combination of colors for top, left, bottom, and right border.

The important CSS attribute for this selector is that we need to hide its overflow. Otherwise, images will overlap from the slideshow frame. So, set its overflow to hidden and keep the relative position.

.container {
  margin: 50px auto;
  width: 500px;
  height: 300px;
  overflow: hidden;
  border: 10px solid;
  border-top-color: #856036;
  border-left-color: #5d4426;
  border-bottom-color: #856036;
  border-right-color: #5d4426;
  position: relative;
}

After that, create some CSS styles for the .photo selector. We need to keep each image with an absolute position and hide them by default in order to switch between images with CSS animation. To do so, set CSS absolute position and in order to hide photos use the opacity attribute and define its value as 0. Likewise, define the animation name and duration inside this selector that we’ll create in the next step.

.photo {
  position: absolute;
  animation: round 16s infinite;
  opacity: 0;
}

Now define the CSS keyframes for the round animation. You just need to define the two frames at 25% and 40%. Keep the opacity 1 (visible) in the first frame and hide the image in the next frame by defining the opacity value as 0. So, the following is the complete code for slideshow animation.

@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
[email protected] round {
  25% {
    opacity: 1;
    -webkit-opacity: 1;
  }
  40% {
    opacity: 0;
    -webkit-opacity: 0;
  }
}

After creating round animation, its time to set the delay between each image of the slideshow. Target each image using CSS nth-child(n) selector and set the animation-delay duration.

img:nth-child(1) {
  animation-delay: 12s;
}

img:nth-child(2) {
  animation-delay: 8s;
}

img:nth-child(3) {
  animation-delay: 4s;
}

img:nth-child(4) {
  animation-delay: 0s;
}

All you’ve done! let me know if you are able to create a simple image slideshow. If you have any questions or need further coding help, comment below, we are here to solve your problems.

You May Also Like

Leave a Comment