HTML - Web Slide Desk

A slide is a single page of a presentation. Collectively, a group of slides may be known as a slide deck.

Example

Let's look at the following example, where we are going to create a HTML web slide desk

<!DOCTYPE html>
<html>
   <style>
      body {
         font-family: verdana;
         background-color: #F4ECF7;
         color: #DE3163;
      }

      .x {
         display: none;
         text-align: center;
         padding: 123px;
      }

      .x.active {
         display: block;
      }

      .prev,
      .next {
         position: absolute;
         top: 40%;
         background-color: #EAFAF1;
         color: #DE3163;
         padding: 10px 20px;
         cursor: pointer;
         border: none;
         transition: background-color 0.2s;
      }

      .prev:hover,
      .next:hover {
         background-color: #DFFF00;
      }

      .prev {
         left: 10px;
      }

      .next {
         right: 10px;
      }
   </style>
<body>
   <div class="x active">
      <h1>SLIDE 1</h1>
      <p>HELLO</p>
   </div>
   <div class="x">
      <h1>SLIDE 2</h1>
      <p>WELCOME</p>
   </div>
   <div class="x">
      <h1>SLIDE 3</h1>
      <p>THANK YOU.!</p>
   </div>
   <button class="prev" onclick="prevSlide()">Previous</button>
   <button class="next" onclick="nextSlide()">Next</button>
   <script>
      let a = 0;
      const slides = document.querySelectorAll('.x');

      function showSlide(n) {
         slides[a].classList.remove('active');
         a = (n + slides.length) % slides.length;
         slides[a].classList.add('active');
      }

      function prevSlide() {
         showSlide(a - 1);
      }

      function nextSlide() {
         showSlide(a + 1);
      }
      showSlide(a);
   </script>
</body>
</html>

When we run the above code, it will generate an output consisting of the button along with a slides containing the text in it displayed on the webpage

Advertisements