Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Programming a slideshow with HTML and CSS
Programming a slideshow using HTML and CSS, we should have a basic understanding of HTML and CSS animations. Slideshow displays a series of content in a sequential manner with smooth transitions.
In this article, we will discuss how to create a slideshow using HTML and CSS without using JavaScript. We are having a set of div elements having textual content or images as slides. Our task is to program a slideshow using HTML and CSS.
Basic Syntax
/* Container for the slideshow */
.slideshow-container {
overflow: hidden;
width: 100%;
height: 300px;
}
/* Slides wrapper */
.slides {
width: calc(100% * number-of-slides);
animation: slideshow-animation duration ease infinite;
}
/* Individual slide */
.slide {
float: left;
width: 100%;
height: 100%;
}
/* Animation keyframes */
@keyframes slideshow-animation {
0%, 20% { margin-left: 0; }
25%, 45% { margin-left: -100%; }
50%, 70% { margin-left: -200%; }
/* Add more steps for additional slides */
}
Steps for Programming a Slideshow with HTML and CSS
We will be following a two step process for programming a slideshow with HTML and CSS which is mentioned below
Creating Structure of Slideshow using HTML
- We have used div to create the slides. The div with class name as parent acts as container for the slideshow.
- The div with class name as slides contains four child element representing four slides and each slide display unique content wrapped inside div named as element.
Designing the Slideshow using CSS
- We have used parent class which acts as the container of the slideshow setting up the dimension of the container using CSS height and width property and set the margin making it center aligned. CSS overflow property make sure that only one slide is displayed at a time.
- We have used element class to set the dimension of slides using CSS height and width property. Each slide is left floated using float property and set the font-size of the textual content of the slide.
- The slides class contains all four slides with width equal to four times width of one slide using calc() function. CSS animation property creates an animation with name as slideShow which loops infinitely.
- Then, we have used .element:nth-child() which selects each slide and we can apply different style to each slide. We have used background-color to change background color of each slide and set the text color to white.
- We have used @keyframes slideShow animation which moves the slides leftward adjusting the margin-left property. We have defined our animation at four steps that is: at 20% first slide is displayed, similarly at 40%, 60%, and 80%, second, third and fourth slide is displayed respectively.
Example 1: Text-Based Slideshow
Here is a complete example code implementing above mentioned steps for Programming a slideshow with HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Programming a slideshow with HTML and CSS</title>
<style>
.wrap {
text-align: center;
margin-bottom: 20px;
}
.parent {
height: 300px;
width: 600px;
overflow: hidden;
margin: 0 auto;
border: 2px solid #ddd;
border-radius: 8px;
}
.element {
float: left;
height: 300px;
width: 600px;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.slides {
width: calc(600px * 4);
animation: slideShow 8s ease infinite;
}
.element:nth-child(1) {
background-color: #04af2f;
color: white;
}
.element:nth-child(2) {
background-color: #031926;
color: white;
}
.element:nth-child(3) {
background-color: #2c302c;
color: white;
}
.element:nth-child(4) {
background-color: #442614;
color: white;
}
@keyframes slideShow {
0%, 20% {
margin-left: 0;
}
25%, 45% {
margin-left: calc(-600px * 1);
}
50%, 70% {
margin-left: calc(-600px * 2);
}
75%, 95% {
margin-left: calc(-600px * 3);
}
}
</style>
</head>
<body>
<div class="wrap">
<h3>Programming a Slideshow with HTML and CSS</h3>
<p>This example creates a slideshow using HTML and CSS with CSS animations.</p>
</div>
<div class="parent">
<div class="slides">
<div class="element">
<strong>Slide 1: Welcome</strong>
</div>
<div class="element">
<strong>Slide 2: Learn CSS</strong>
</div>
<div class="element">
<strong>Slide 3: Animations</strong>
</div>
<div class="element">
<strong>Slide 4: Complete</strong>
</div>
</div>
</div>
</body>
</html>
A slideshow with 4 colored slides appears, each displaying text for 2 seconds before automatically transitioning to the next slide. The slides cycle infinitely with smooth transitions.
Example 2: Image-Based Slideshow
In this example we have used images using img tag for creating a slideshow instead of using textual content
<!DOCTYPE html>
<html>
<head>
<title>Programming a slideshow with HTML and CSS</title>
<style>
.wrap {
text-align: center;
margin-bottom: 20px;
}
.parent {
height: 300px;
width: 600px;
overflow: hidden;
margin: 0 auto;
border: 2px solid #ddd;
border-radius: 8px;
}
.element {
float: left;
height: 300px;
width: 600px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
}
.slides {
width: calc(600px * 4);
animation: slideShow 10s ease infinite;
}
.element img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 4px;
}
@keyframes slideShow {
0%, 22% {
margin-left: 0;
}
25%, 47% {
margin-left: calc(-600px * 1);
}
50%, 72% {
margin-left: calc(-600px * 2);
}
75%, 97% {
margin-left: calc(-600px * 3);
}
}
</style>
</head>
<body>
<div class="wrap">
<h3>Image Slideshow with HTML and CSS</h3>
<p>This example creates an image slideshow using CSS animations.</p>
</div>
<div class="parent">
<div class="slides">
<div class="element">
<img src="/html/images/test.png" alt="HTML Tutorial Image">
</div>
<div class="element">
<img src="/css/images/css-mini-logo.jpg" alt="CSS Logo">
</div>
<div class="element">
<img src="/html/images/test.png" alt="HTML Example">
</div>
<div class="element">
<img src="/css/images/css-mini-logo.jpg" alt="CSS Tutorial">
</div>
</div>
</div>
</body>
</html>
An image slideshow with 4 images appears, each image displaying for about 2.5 seconds before smoothly transitioning to the next. The images are properly scaled and centered within their containers.
Key Points
-
Container Setup: Use
overflow: hiddento show only one slide at a time -
Slide Width: Total slides width should be
calc(single-slide-width * number-of-slides) - Float Layout: Each slide should float left to arrange horizontally
- Animation Timing: Use percentage keyframes to control when each slide appears
-
Smooth Transitions: CSS
easetiming function provides natural movement
Conclusion
CSS-only slideshows provide an elegant solution for simple image or text carousels without JavaScript dependencies. While effective for basic needs, JavaScript offers more control and interactivity for complex slideshow requirements.
Updated on: 2026-03-15T16:50:16+05:30
5K+ Views
Advertisements