Manual Fade Slideshow Display

INFORMATION & CODE

Manual Fade Slideshow Display

What the Code Does

This code creates a Manual Fade Slideshow, an interactive web component that allows users to cycle through a series of images using "Previous" and "Next" navigational arrows or clickable pagination dots at the bottom. The interface also displays dynamic index counters (e.g., "1 / 3") and customizable text captions over each image.

How the Code Works

The mechanism relies on HTML to structure the content, CSS to style the layout and handle the smooth opacity transition animations, and JavaScript to control the logic. By default, all slides are hidden, and the JavaScript function (showSlides) determines which specific image and navigation dot should be displayed based on user interaction. It ensures infinite looping by resetting to the first slide when going past the last one, or jumping to the final slide when clicking backwards from the beginning.

How to Use the Code

To use this code in a project, save the HTML snippet into an index.html file, place the CSS rules into a linked styles.css file, and put the JavaScript logic into a separate scripts.js file within the same directory. You can easily customize or expand the slideshow by adding more image slide containers (<div class="slides fade">) in the HTML and appending a corresponding <span class="dot"></span> navigation element for each new slide.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Manual Fade Slideshow</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h2>Manual Fade Slideshow</h2>
    <div class="slideshow-wrapper">
      <div class="slides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://e-nash.net/photos/mckenzie-river-5129717_1920.jpg" alt="mckenzie river" style="width:100%">
        <div class="text">Caption Text</div>
      </div>
      <div class="slides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://e-nash.net/photos/iceland_landscape.jpg" alt="Iceland landscape" style="width:100%">
        <div class="text">Caption Two</div>
      </div>
      <div class="slides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://e-nash.net/photos/coastal-view.jpg" alt="coastal view"  style="width:100%">
        <div class="text">Caption Three</div>
      </div>
      <a class="prevslide" onclick="addSlides(-1)">❮</a>
      <a class="nextslide" onclick="addSlides(1)">❯</a>
      <br>
      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .slides {
        display: none
      }
      img {
        vertical-align: middle;
      }
      .slideshow-wrapper {
        position: relative;
        top: 10px;
        width: 100%;
        max-width: 650px;
        margin: auto;
      }
      .prevslide, .nextslide {
        position: absolute;
        top: 45%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 1.5s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        cursor: pointer;
      }
      .nextslide {
        right: 0;
        border-radius: 3px 0 0 3px;
      }
      .prevslide:hover, .nextslide:hover {
        background-color: rgba(0,0,0,0.8);
      }

      .text {
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffffff;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translatex(-50%);
        text-align: center;
      }
      .numbertext {
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffffff;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }
      .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 10px 2px;
        background-color: #ff0000;
        border-radius: 50%;
        display: inline-block;
        transition: background-color l.5s ease;
      }

      .active.dot {
        background-color: #00cc00;
      }

      .fade {
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
      }


      @media(max-width: 480px) {
        .prev, .next,.text {
          font-size: 11px;
        }
      }

JAVASCRIPT


                let slideIndex = 1;
showSlides(slideIndex);

function addSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.querySelectorAll(".slides");
  let dots = document.querySelectorAll(".dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

MENU

INFORMATION & CODE