Skip to content
Related Articles

Related Articles

Improve Article

Programming a slideshow with HTML and CSS

  • Last Updated : 15 Jul, 2020

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 property 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 divide the task into two sections 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.

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 Code:

    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 Code:

    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 above two section 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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :