js slider for each slide remove active

Breiz Heurope

3 min read

·

11-03-2025

13

0

Share

Creating a smooth, user-friendly JavaScript image slider often involves managing the "active" class to highlight the currently viewed slide. This article focuses on efficiently removing the active class from the previously active slide before applying it to the new one. We'll explore several approaches, emphasizing clean code and best practices. This ensures only one slide displays the active styling at any given time.

Understanding the Problem: Multiple Active Slides

A common issue in slider development is failing to remove the active class from the previous slide. This leads to multiple slides simultaneously displaying the active styling, ruining the visual presentation. Our goal is to prevent this by ensuring only one slide has the active class at any time.

Methods for Removing the Active Class

Several methods exist for managing the active class in a JavaScript slider. Let's explore two effective approaches:

Method 1: Using classList.remove()

This direct approach is efficient and easy to understand. We'll iterate through all slides, removing the 'active' class before adding it to the currently selected slide.

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(n) {
  // Remove active class from all slides
  slides.forEach(slide => slide.classList.remove('active'));

  // Add active class to the current slide
  slides[n].classList.add('active');
  currentSlide = n;
}

// Example usage:  Next and previous buttons
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

nextBtn.addEventListener('click', () => {
  showSlide((currentSlide + 1) % slides.length);
});

prevBtn.addEventListener('click', () => {
  showSlide((currentSlide - 1 + slides.length) % slides.length);
});

//Initial Slide
showSlide(currentSlide);

This code first selects all elements with the class slide. The showSlide function iterates through each slide, removing the active class. Then, it adds the active class to the specified slide (slides[n]). The modulo operator (%) ensures smooth looping between the first and last slides.

Method 2: Storing the Previous Active Slide

This method improves efficiency by only removing the active class from the previously active slide. This avoids unnecessary iterations when dealing with a large number of slides.

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
let previousSlide = null;

function showSlide(n) {
  // Remove active class from previous slide (if exists)
  if (previousSlide !== null) {
    previousSlide.classList.remove('active');
  }

  // Add active class to current slide
  slides[n].classList.add('active');

  // Update previous and current slide variables
  previousSlide = slides[n];
  currentSlide = n;
}

// (Next and Previous button event listeners remain the same as Method 1)

showSlide(currentSlide);

Here, previousSlide tracks the previously active slide. The active class is only removed from previousSlide if it's not null (meaning a slide was previously active). This approach is generally more efficient for larger sliders.

HTML Structure Example

Your HTML should contain elements representing your slides, with a class like "slide". Buttons for navigation can be added for user interaction.

<div class="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
  <button id="prevBtn">Previous</button>
  <button id="nextBtn">Next</button>
</div>

Remember to adjust image paths and add any necessary CSS for styling.

Choosing the Best Method

Both methods effectively remove the active class from previous slides. Method 1 is simpler for beginners to understand. Method 2 offers better performance with a large number of slides. Choose the method that best suits your needs and coding style. Remember to always thoroughly test your slider functionality to ensure a seamless user experience.