A slideshow can be used to display text or images that continuously scroll from one slide to the other to display its content. This article shows an approach to building a slideshow with the use of only HTML and CSS. It consumes less browser memory and takes less computation power as there is no JavaScript involved.
JavaScript-based sliders make the web page slower and also do not work if the user has disabled JavaScript in the browser.
It uses the approach of using animation keyframes to scroll through each of the slides by modifying each of the slide’s margin-left properties during the animation. The animation type can be specified so that the slides can be animated as per the required duration and effect. In this article, we will learn how to build a slideshow using HTML & CSS.
Approach:
- Use separate div sections for each slide to contain the text content. This allows for individual content definitions on each slide.
- Employ the slide-wrapper class to encapsulate all slides, enabling consistent animation effects and easy application of CSS properties to each slide.
- Utilize the overflow property to clip excess content, ensuring that the content within each slide remains visible, and any overflow is hidden.
- Apply the float property to align contents to the left, providing a structured layout for the slide elements.
- Apply the:nth-child() selector to style elements based on their position in a group of siblings. This allows for individualized styling, such as background color, based on the order of each slide.
Example: In this example, we will see the design of slideshow with HTML and CSS .
HTML
<html>
<head>
<title>HTML and CSS Slideshow</title>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
GeeksforGeeks
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
A computer science portal
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
This is an example of
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
Slideshow with HTML and CSS only
</h1>
</div>
</div>
</div>
</body>
</html>
|
CSS
body { font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
}/* Styling the area of the slides */#slideshow { overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}/* Style each of the sides with a fixed width and height */
.slide { float: left;
height: 510px;
width: 728px;
}/* Add animation to the slides */.slide-wrapper { /* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
animation: slide 10s ease infinite;
}/* Set the background color of each of the slides */
.slide:nth-child(1) {
background: green;
}.slide:nth-child(2) {
background: pink;
}.slide:nth-child(3) {
background: red;
}.slide:nth-child(4) {
background: yellow;
}/* Define the animation for the slideshow */
@keyframes slide { /* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
} |
Complete Code: Here, we will combine the above two sections into one to achieve the mentioned task.
HTML
<!DOCTYPE html><html>
<head>
<title>HTML and CSS Slideshow</title>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 510px;
width: 728px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
animation: slide 10s ease infinite;
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
@keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
</style>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
GeeksforGeeks
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
A computer science portal
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
This is an example of
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
Slideshow with HTML and CSS only
</h1>
</div>
</div>
</div>
</body>
</html>
|
Output:
Slideshow using HTML & CSS
Article Tags :
Recommended Articles