Skip to main content

​
Overview

The slider component displays featured movies in a rotating carousel with automatic transitions, manual navigation controls, and touch/swipe support for mobile devices.

​
HTML Structure

The slider is built from index.html:44-106: 
<section class="slider-section">
  <div class="slideshow-container fade">
    <!-- Slide 1 -->
    <div class="slideshow-item" style="display: block;">
      <div class="slideshow-item-description">
        <div class="slideshow-item-description-container">
          <span class="movie-title">The Dark Knight</span><br>
          <span class="movie-info">2008 | Action, Crime | IMDB: 9.0</span><br>
          <span class="movie-description">When the menace known as the Joker wreaks havoc...</span><br>
          <a href="./pages/movie.html" tabindex="0" role="button">
            <button class="movie-read-more">Read More</button>
          </a>
        </div>
      </div>
      <img class="slider-batman" src="./images/slider/slider-batman.png">
    </div>

    <!-- Slide 2 -->
    <div class="slideshow-item">
      <div class="slideshow-item-description">
        <div class="slideshow-item-description-container">
          <span class="movie-title">Top Gun: Maverick</span><br>
          <span class="movie-info">2022 | Action, Drama | IMDB: 8.4</span><br>
          <span class="movie-description">When the menace known as the Joker...</span><br>
          <a href="./pages/movie.html" tabindex="0" role="button">
            <button class="movie-read-more">Read More</button>
          </a>
        </div>
      </div>
      <img class="slider-maverick" src="./images/slider/slider-maverick.png">
    </div>

    <!-- Slide 3 -->
    <div class="slideshow-item">
      <div class="slideshow-item-description">
        <div class="slideshow-item-description-container">
          <span class="movie-title">Interstellar</span><br>
          <span class="movie-info">2014 | Adventure, Sci-Fi | IMDB: 8.6</span><br>
          <span class="movie-description">When the menace known as the Joker...</span><br>
          <a href="./pages/movie.html" tabindex="0" role="button">
            <button class="movie-read-more">Read More</button>
          </a>
        </div>
      </div>
      <img class="slider-interstellar" src="./images/slider/slider-interstellar.png">
    </div>

    <!-- Navigation Controls -->
    <a class="back-button" onclick="previousSlide()">&#10094;</a>
    <a class="forward-button" onclick="nextSlide()">&#10095;</a>
    
    <!-- Dots Navigation -->
    <div class="slideshow-dots-container">
      <span class="slideshow-dot" onclick="changeSlide(1)"></span>
      <span class="slideshow-dot" onclick="changeSlide(2)"></span>
      <span class="slideshow-dot" onclick="changeSlide(3)"></span>
    </div>
  </div>
</section>

​
Slide Structure

Each slide contains movie information and an image.Classes:
  • slideshow-item - Slide wrapper
  • slideshow-item-description - Text content wrapper
  • slideshow-item-description-container - Inner content container
  • movie-title - Movie title text
  • movie-info - Year, genre, and rating
  • movie-description - Movie synopsis
  • movie-read-more - Call-to-action button
Image Classes: Unique classes for each slide image (e.g., slider-batman, slider-maverick, slider-interstellar)
Visual indicators showing the current slide position.Container: .slideshow-dots-containerDots: .slideshow-dot - Individual dot indicatorsActive State: .slideshow-enabled - Applied to the active dotFunction: changeSlide(slideNumber)

​
JavaScript Functionality

​
Core Variables

From slider.js:6-8: 
const automaticScroll = true;
const scrollInterval = 5000; // 5 seconds
let activeSlide = null;

​
Automatic Scrolling

From slider.js:10-12: 
var intervalId = setInterval(() => {
  if (automaticScroll) nextSlide();
}, scrollInterval);
The slider automatically advances every 5 seconds when automaticScroll is enabled.
Advances to the next slide, looping back to the first slide after the last one.
function nextSlide() {
  activeSlide += 1;
  if (activeSlide > 3) activeSlide = 1;
  setSlide(activeSlide);
}
Goes back to the previous slide, looping to the last slide when on the first.
function previousSlide() {
  activeSlide -= 1;
  if (activeSlide < 1) activeSlide = 3;
  setSlide(activeSlide);
}
Jumps directly to a specific slide (used by dot navigation).
function changeSlide(slide) {
  activeSlide = slide;
  setSlide(slide);
}
Core function that handles slide transitions and updates the UI.
  • Resets the automatic scroll interval
  • Hides all slides
  • Removes active state from all dots
  • Shows the selected slide
  • Activates the corresponding dot

​
Touch Gestures

From slider.js:59-89, the slider supports swipe gestures: 
// Initialize touch-points
let initialTouchX = null;
let initialTouchY = null;

document.addEventListener('touchstart', (event) => {
  initialTouchX = event.touches[0].clientX;
  initialTouchY = event.touches[0].clientY;
});

// Handle touch-swipe actions
document.addEventListener('touchmove', (event) => {
  if (!initialTouchX || !initialTouchY) return;

  const xUp = event.touches[0].clientX;
  const yUp = event.touches[0].clientY;
  const xDiff = initialTouchX - xUp;
  const yDiff = initialTouchY - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      // Swipe left
      nextSlide();
    } else {
      // Swipe right
      previousSlide();
    }
  }

  initialTouchX = null;
  initialTouchY = null;
});
Touch gestures allow mobile users to swipe left/right to navigate between slides.

​
Configuration Options

  • automaticScroll: Enable/disable automatic slide transitions
  • scrollInterval: Time between automatic transitions (in milliseconds)
  • Number of slides: Currently set to 3 slides

​
Customization

To add or remove slides:
  1. Add/remove .slideshow-item elements in the HTML
  2. Add/remove corresponding .slideshow-dot elements
  3. Update the slide count in nextSlide() and previousSlide() functions

Build docs developers (and LLMs) love

Get started for freeTalk to us