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.

Related Post:

1. Simple Footer HTML CSS
2. Stopwatch using JavaScript
3. CSS Floating Action Button
4. Javascript Age Calculator
5. Nursery Schools in Koramangala
6. Automatic Image Slider in Html CSS

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