Introduction:
In this tutorial, you’ll learn how to build a auto images slideshow using HTML and CSS only. Slideshows are popular in modern web design for showcasing images or featured content without taking up too much space. This tutorial provides a step-by-step guide on styling and animating an image slider with just a few lines of CSS.
Things You Will Learn:
In this tutorial, you will:
- Setting up a simple project structure for your carousel.
- Creating responsive design with basic CSS and HTML styling.
- Implementing keyframe animations to slide images in the carousel.
- Adding shadow and border effects for a polished look.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather reading a blog post you can check out the video down below. Also subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Auto Images Slideshow’. Inside this folder we have 2 files. These files are :
- index.html
- style.css
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auto Image Slideshow</title> <!--Stylesheet--> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="wrapper"> <img src="slideshow1.jpg" /> <img src="slideshow2.jpg" /> <img src="slideshow3.jpg" /> </div> </div> </body> </html>
CSS:
Let’s add some style to the layout. Copy the code provided and include it in your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #3991f5;
}
.container {
width: 85vmin;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
overflow: hidden;
border: 20px solid #ffffff;
border-radius: 8px;
box-shadow: 10px 25px 30px rgba(30, 30, 200, 0.3);
}
.wrapper {
width: 100%;
display: flex;
animation: slide 12s infinite;
}
img {
width: 100%;
}
@keyframes slide {
0% {
transform: translateX(0);
}
33% {
transform: translateX(0);
}
38% {
transform: translateX(-100%);
}
66% {
transform: translateX(-100%);
}
71% {
transform: translateX(-200%);
}
100% {
transform: translateX(-200%);
}
}
Conclusion:
This tutorial demonstrates how to create a simple yet attractive auto image slideshow using only HTML and CSS. By combining flexbox and keyframe animations, you can add a dynamic element to your web design without relying on JavaScript. Try expanding this code by adding more images or experimenting with different animation timings
