Auto image slideshow using HTML CSS

byCodingFlicks -December 11, 2022

0

An auto-image slideshow is an automatic slideshow of a group of images. This slideshow is a great way to display multiple images on your website. This CSS slideshow or CSS slider has no manual control. We have used the slide-in and slide-out effects to create the image rotation effect. You can watch the video demo to understand how this slideshow works. We have a large collection of snippets on CSS and javascript animations, including both mobile and desktop versions. You can check those by clicking the load more button below our homepage.

I hope you have already checked the video demo. In the HTML file, we have a div element named slider-area. Inside that, we have another div called img-area which contains all the images we need to display in the CSS slider or CSS slideshow. We will be using four different images for this slideshow project. In the CSS part, we set the width of the slider-area div to 90vmin. In order to center the slider-area div we have used absolute position value. To make the div element pop out, We have given a ridge border of 30px around it. We use CSS keyframes animation to make these images loop. In this animation, the keyframes begin at 0% and the wrapper remains at the same position throughout the entire keyframe interval. A shift of the wrapper left at 25 percent using the transform property. These keyframes are repeated until we reach the fourth image.

You May Also Like:

Auto image slideshow using HTML CSS [ Source Code ]:

Create an HTML file, add CSS, and then copy the code below and paste them into your project. Save it and test that in the browser. If the project is not working then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto image slideshow using HTML CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider-area">
        <div class="img-area">
            <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
        </div>
    </div>
</body>
</html>

ADD CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
	background-color: #17374c;
}
.slider-area {
    position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	width: 90vmin;	
	border-radius: 10px;
	border: 30px ridge #ddd;
    overflow: hidden;
}
.img-area{
    width: 100%;
    display: flex;
    animation: animate 15s linear infinite;
}
.img-area img{
    max-width: 100%;
}
@keyframes animate{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

I am hopeful that the code is working for you. We would appreciate it if you would share our content. We would like to thank you for being a part of our community.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.