آموزش HTML - اسلاید

اسلاید یک صفحه منفرد از یک ارائه است. به‌طور کلی، دسته‌ای از اسلایدها ممکن است به عنوان مجموعه اسلاید شناخته شوند.

مثال

بیایید به مثال زیر نگاه کنیم، جایی که قصد داریم یک مجموعه اسلاید وب HTML ایجاد کنیم.

<!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>

وقتی کد بالا را اجرا کنیم، خروجی شامل دکمه‌ها همراه با اسلایدی حاوی متن روی صفحه وب نمایش داده می‌شود.