INFORMATION & CODE

Automatic Fade Slideshow Display

What It Does

This code creates a responsive, automatic image slideshow (carousel) complete with fading transitions, image captions, slide numbering indicators, and interactive navigation dots. The slideshow cycles through a series of images automatically every 3 seconds, while also allowing users to manually jump to a specific slide by clicking the corresponding navigation dot below the gallery.

How It Works

The system relies on a combination of HTML structure, CSS styling, and JavaScript logic:

• HTML: Defines the container (.slideshow-wrapper), individual slide items (.slides) containing images, text captions, and index markers, along with clickable dot elements (.dot) linked to a currentSlide() function.
• CSS: Handles the visual presentation, hiding inactive slides by default (display: none), centering the gallery, styling captions and indicator dots, and providing a smooth CSS @keyframes fade-in animation (.fade) that triggers whenever a new slide appears.
• JavaScript: Controls the timing and state of the gallery. The showSlides() function loops through all slide and dot elements, hides them, increments the slideIndex, resets back to the first slide if it exceeds the total count, displays the current active slide, highlights the corresponding navigation dot, and uses setTimeout() to recursively call itself every 3,000 milliseconds (3 seconds).