How to create a slideshow with HTML and CSS ?

Last Updated : 11 Mar, 2024

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

Suggest improvement

How to Skew Text on Hover using HTML and CSS?

How to specify that an option-group should be disabled in HTML5 ?

Share your thoughts in the comments

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

How to create a slideshow with HTML and CSS ?

Approach:

HTML

CSS

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?