Automatic Image Slideshow using HTML & CSS

In this article I have shown you how to create automatic image slideshow using HTML and CSS code. Earlier I showed you how to make an automatic image slider. I only used HTML and CSS code to create this design.

I have used 9 images in this image slideshow. We have created a circular circle by arranging each image neatly at a certain angle. In the case of a simple automatic image slideshow, all the images are in one box. Those images change from time to time. But in this case I have arranged each image at a certain angle. Here I have used 9 images so I have made a 360 degree circle by placing each image at a 40 degree angle.

Below I have given complete step-by-step how I made this design using HTML and CSS code.

Step 1: Create basic structure and add images

First I added the required images using the following HTML code. I have used 9 images, you can reduce or increase the amount of your choice if you want.

   <div class="slider">
     <div class="rotator">
        <div class="items">
           <img src="img1.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img2.jpg" />
        </div>
        <div class="items">
           <img src="img3.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img4.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img5.jpg" />
        </div>
        <div class="items">
           <img src="img6.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img7.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img8.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img9.jpg" alt="items photo" />
        </div>
     </div>
  </div>

Now I have set a specific background color for the web page.

    body{
      background: #0c3c53
    }

Step 2: Design the slideshow with css code

I have constructed the structure of this slider using the following CSS codes. Here we have used 350px width and 150px height of each slider. I have used animation: roter 29s linear infinite to rotate this slideshow.

Here I used 29 seconds to rotate the whole slider once. If you want to rotate this slider more quickly, you can change the value here.

 .slider {
    position: relative;
    width: 350px;
    margin: 50px auto;
    perspective: 1000px;
    padding-top: 120px;
    }
 .rotator {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 55%;
    height: 150px;
    transform-style: preserve-3d;
    animation: roter 29s linear infinite;
    }

Step 3: Set the size of the images and do the basic design

Now I have determined the size of each image. Here I have used 100% of the height and width of the images. This means that the image will be exactly equal to the structure in the slider at the top. I have also used a border around these images to enhance its beauty.

 .items {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: 2px solid white;
    }

 .items img {
    height: 100%;
    width: 100%;
    transition: all 3s ease;
    }

I have given a hover effect in the images. When you click on these images, the images will zoom in a bit. I used transform: scale (1.1) to zoom in on this.

If you want to increase the value of this zoom, you can increase the amount of quality here. Here I have used 1.1 You can use 1.4 or 1.5 if you want.

 .items:hover img {
    transform: scale(1.1);
    }

Step 4: Rotate the slider using @keyframes router

Now I have used CSS @keyframes to rotate this slider. This will cause the slider to rotate 360 ​​along the y-axis.

 @keyframes roter {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }

Step 5: Arrange the images at specific angles

As you can see in the picture above, only one of the 9 pictures can be seen here. This is because every picture has been added to that one place. Now I will arrange the images at a certain angle using the following CSS codes.

Transform: rotateY has been used for this. Since I have used 9 images, I have arranged each image at a 40 degree angle. As a result, 9 images are joined together to form a circle.

 .items:first-child {
    transform: rotateY(calc(40deg)) translateZ(300px);
    }

 .items:nth-child(2) {
    transform: rotateY(calc(80deg)) translateZ(300px);
    }

 .items:nth-child(3) {
    transform: rotateY(calc(120deg)) translateZ(300px);
    }

 .items:nth-child(4) {
    transform: rotateY(calc(160deg)) translateZ(300px);
    }

 .items:nth-child(5) {
    transform: rotateY(calc(200deg)) translateZ(300px);
    }

 .items:nth-child(6) {
    transform: rotateY(calc(240deg)) translateZ(300px);
    }

 .items:nth-child(7) {
    transform: rotateY(calc(280deg)) translateZ(300px);
    }

 .items:nth-child(8) {
    transform: rotateY(calc(320deg)) translateZ(300px);
    }

 .items:nth-child(9) {
    transform: rotateY(calc(360deg)) translateZ(300px);
    }

Above we have created the complete image slideshow. This slideshow takes 29 seconds to rotate once. That means we will see each picture after 29 seconds.

Below I have used a hover effect. This slider will stop rotating when you mouse over or click on these images. Above I have instructed to rotate the slideshow to Infinite using animations.

Now below I have instructed to stop using the animation-play-state: paused when you click on it.

 .rotator:hover {
    animation-play-state: paused;
    }

Hope you learned from this tutorial how I created this automatic image slideshow. You can watch the live demo if you want to know better how it works.

This type I have already made many more automatic image sliders. You can see those designs if you like this slider.