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;
  }
}
-webkit-@keyframes 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 Might Be Interested In:

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

10 thoughts on “Simple Image Slideshow in HTML & CSS”

  1. I have been trying out this code It’s at http://www.herefordwebdesign.co.uk/workshop/nolut/index.html. The slideshow is at the bottom of the page.

    There are two issues. One is that after the final image there is a black square before it returns to the first image.

    The other is that when the page resizes to smart phone size the image moves to the left hand side of the container.

    • Hi Jon!
      I just checked slider implementation on your site. You have missed the “photo” class for each slide. Use the HTML & CSS syntax as described in the tutorial.

      You can fix slider layout on mobile with the following CSS:

      @media only screen and (max-width: 720px){
       .slide{ 
         width: 100%;
       }
      }
      
  2. Leaving everything as it is, if I add a fifth image it works fine. The problem is I only need 4! Your example was created for 5 images, where in the code can I change it from 5 to 4?

    • Define the animation delay time for 4 images as follows:

      img:nth-child(1) {
        animation-delay: 8s;
      }
       
      img:nth-child(2) {
        animation-delay: 4s;
      }
       
      img:nth-child(3) {
        animation-delay: 0s;
      }
      
  3. Looks like I want – I made a slider in jss about 10 years ago, but doesn’t now work via iframe.

    I’m about working this. But I don’t quite know where is the start switch.

    • Hi John!
      You can download the complete source code using the above “Download” button. Then you can start code editing using any code editor. This is a pure CSS image slideshow that doesn’t need JS.

  4. Complete Novice: This worked for me when a JavaScript one didn’t work. I only copy and paste and then tweak a little but managed to make the images smaller, change colours and add another image. Now what I want to do is run two of these side-by-side horizontally.

    I made two separately named containers and they run different images, all great so far.
    However, they appear one on to of the other. What and where can I type something to put them side-by-side?

  5. In the right corner is a grey edge i dont know why

  6. Hello,

    Please, tell me how can I integrate this HTML+CSS code into my home page, still I am using WordPress. it doesn’t work after many attempts ! only the images selected appears, without any effect or style !

    Thanks a lot for your help
    Best regards

    • Ahmed you make sure to include the CSS as well into your theme. Or you can also inline css within the wordpress customize.

Comments are closed.