Programming a slideshow with HTML and CSS

16 Dec, 2021
In this article, we will know how to build the slideshow using HTML & CSS. 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. We will divide the task into two sections ie., in the first, we will decorate the structure by using only HTML and in the second section, we will decorate the structure by using CSS.
Approach: For building the slideshow or carousel, we will follow the below approach.
To display the text content on each slide, we have defined a separate div section that will carry content for each slide.
We have the slide-wrapper class to carry all the slide frame that facilitates implementing the same animation effect as well as other CSS properties to each slide.
We have used the overflow property so that it will clip the extra content, and the rest of the content will be invisible if the content of an element is too big to fit in the specified area. The float property is used in order to align the contents to the left.
We have used :nth-child() selector in order to apply the background color that will match the elements based on their position in a group of siblings. It matches every element that is the nth-child.
In order to define the animation for the slideshow, the keyframes property will be used to scroll through each of the slides by modifying the margin-left property for each of the slides during the animation.
First Section: This section contains the HTML portion of the page. The slides that have to be shown are defined with their corresponding text.
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>
Second Section: This section consists of all the styling that would be used to make the slideshow. The animation to be used to move each of the slides is defined by setting the margin-left property as required for every slide. This gives it an appearance of smoothly transitioning between each of the slides.
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 sideswith 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 colorof 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 animationfor 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
bhaskargeeksforgeeks
CSS-Basics
HTML-Basics
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property