Automatic Image Slideshow using HTML & CSS
Tags: html, css, beginners, webdev
Published: 2021-08-20 16:21:56

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](https://www.foolishdeveloper.com/2021/08/automatic-image-slider.html). 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](https://www.foolishdeveloper.com/2021/08/automatic-image-slider.html), 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.

```html
   <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>
```
![Create basic textures and add images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwrciqpui4md148ci2rz.jpg)


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

```css
    body{
      background: #0c3c53
    }
```
![set a specific background color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pdbxjj6ig74ymxokmil.jpg)


### 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.
```css
 .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.

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

 .items img {
    height: 100%;
    width: 100%;
    transition: all 3s ease;
    }
```
![Set the size of the images and do the basic design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91rziu3m9f0889kf133f.jpg)

 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.

```css
 .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.

```css
 @keyframes roter {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }
```
![Rotate the slider using @keyframes router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17oncelk8xo5pcn7v3rn.jpg)

### 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.

```css
 .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);
    }
```

![Automatic Image Slideshow using HTML & CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtw78peeqrhpxmnbmp7p.jpg)

 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.

```css
 .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](https://www.foolishdeveloper.com/2021/08/automatic-image-slider.html) if you want to know better how it works. 

This type I have already made many [more](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) [automatic image sliders](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html). You can see those designs if you like this slider.