JS Slider for Each Slide To Remove Active Efficiently

When using the JS slider control for each slide to remove the functionality of the active class. It is critical to ensure a smooth transition and active state management. This tutorial delves into off-topic content, explains it, or goes through it step-by-step with code examples. Whether you’re using vanilla JavaScript, a library like SplideJS, a simple solution like Tiny Slider, or the siema library, you’ll find helpful insights here.

Table Of Contents

What is Active Class in Sliders?
Setting Up a Simple Slider with Active Class Removal
Enhancing Functionality with SplideJS
- Example: Splide.js with Active Slide Management
Tiny Slider Example
- Example: Tiny Slider with Active Class Handling
Siema Example
- Example: Siema with Active Slide Class
Summary of Features for Each Library
Related Content You Might Enjoy
Complete Project: Dynamic Slider with Active Class Toggle
- Project Structure
Code & Preview

What is Active Class in Sliders?

The “Active” class highlights or slides are currently visible. Managing this state is critical to maintaining the user experience. This is especially true when using resources such as autoplay, navigation, or animations. Delete and reassign to the active class, which guarantees perfect dynamic transformation.

Setting Up a Simple Slider with Active Class Removal

Here’s a basic example using vanilla JavaScript:

HTML:

<div class="slider">
  <div class="slide active">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button id="next">Next</button>

CSS:

/* Slider container styling */
.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 300px; /* Adjust the slider width */
  margin: 20px auto;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* Individual slide styling */
.slide {
  display: none; /* Hide all slides initially */
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Active slide styling */
.slide.active {
  display: block; /* Only display the active slide */
  color: #fff;
  background-color: #007bff;
  transform: scale(1.05); /* Slight zoom effect for active slide */
  opacity: 1;
}

/* Next button styling */
#next {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  font-size: 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#next:hover {
  background-color: #0056b3;
}

JavaScript:

const slides = document.querySelectorAll(".slide");
const nextButton = document.getElementById("next");
let currentSlide = 0;

function updateActiveSlide() {
  slides.forEach((slide) => slide.classList.remove("active"));
  slides[currentSlide].classList.add("active");
}

nextButton.addEventListener("click", () => {
  currentSlide = (currentSlide + 1) % slides.length;
  updateActiveSlide();
});

Explanation:

The updateActiveSlide function removes the “active” class from all slides and adds it to the current slide.
The button click handler cycles through the slides using modular arithmetic.

Enhancing Functionality with SplideJS

Splide.js is a lightweight, flexible slider library with excellent customization options and smooth animations.

Example: Splide.js with Active Slide Management

HTML:

<div id="splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 1</li>
      <li class="splide__slide">Slide 2</li>
      <li class="splide__slide">Slide 3</li>
    </ul>
  </div>
</div>

CSS: Include Splide’s CSS and Javascript link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>

JavaScript:

const splide = new Splide('#splide', {
  type: 'loop',
  perPage: 1,
  perMove: 1,
});

splide.on('move', () => {
  const slides = document.querySelectorAll('.splide__slide');
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === splide.index);
  });
});

splide.mount();

Features:

Lightweight and easy to integrate into projects.

Automatically toggles the “active” class based on the current slide.

Tiny Slider Example

If you’re looking for a lightweight library, Tiny Slider is an excellent choice. Its responsive options and simple API make it easy to implement active class toggling.

Example: Tiny Slider with Active Class Handling

HTML:

<div class="tiny-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Include Splide’s CSS and Javascript link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>

Javascript:

const slider = tns({
  container: '.tiny-slider',
  items: 1,
  slideBy: 'page',
  controls: true,
  nav: false,
});

const slides = document.querySelectorAll('.tiny-slider div');

slider.events.on('indexChanged', (info) => {
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === info.index);
  });
});

Features:

Manages active classes with the indexChanged event.
Built-in navigation and controls.

Siema Example

Siema is a minimalist slider library, ideal for projects requiring lightweight solutions.

Example: Siema with Active Slide Class

HTML:

<div class="siema">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

Library Import:

<script src="https://unpkg.com/siema"></script>

CSS:

.siema {
  display: flex;
  overflow: hidden;
}

.siema > div {
  min-width: 100%;
  transition: transform 0.5s;
}

.siema > div.active {
  background-color: #f0f0f0;
  border: 2px solid #000;
}

JavaScript:

const siema = new Siema();

function updateActiveSlide() {
  const slides = document.querySelectorAll('.siema > div');
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === siema.currentSlide);
  });
}

document.getElementById('prev').addEventListener('click', () => {
  siema.prev();
  updateActiveSlide();
});

document.getElementById('next').addEventListener('click', () => {
  siema.next();
  updateActiveSlide();
});

// Initialize the active class on page load
updateActiveSlide();

Features:

Manual active class toggling using currentSlide.
Simple and lightweight.

Summary of Features for Each Library

Library	Active Slide Management	Best Use Case
Splide.js	Built-in event listeners for active class	Advanced, feature-rich sliders
Tiny Slider	`indexChanged` event for dynamic updates	Touch-friendly, responsive sliders
Siema	Manual handling of active classes	Minimalistic, lightweight sliders

Each library has special resources and strengths. You can use any sample. These are for controlling scrollbars. It depends on your needs. This ensures that these examples effectively lead to active classes for a quieter user experience.

Complete Project: Dynamic Slider with Active Class Toggle

This is a complete project that provides a JS slider control for each slide to remove active functionality using vanilla JavaScript. The project is designed to be streamlined and includes navigation buttons for a full interactive experience. type

Project Structure

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive JS Slider</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <div class="header">
        <h1>js slider for each slide remove active</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci
          perspiciatis <br />
          rem necessitatibus quia dignissimos veritatis!
        </p>
      </div>
      <div class="slider-container">
        <div class="slider">
          <div class="slide active">Slide 1</div>
          <div class="slide">Slide 2</div>
          <div class="slide">Slide 3</div>
          <div class="slide">Slide 4</div>
        </div>
        <div class="controls">
          <button id="prev" disabled>← Previous</button>
          <button id="next">Next →</button>
        </div>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

CSS:

/* Basic Page Styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #9694FF;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
}

.header {
  text-align: center;
  color: #222222;
}

.header h1 {
  text-transform: capitalize;
  font-size: calc(1.5rem + 0.8vw);
  margin-bottom: 0.8rem;
}

.header p {
  text-align: center;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

.slider-container {
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  margin: auto;
}

.slider {
  display: flex;
  transition: transform 0.3s ease;
}

.slide {
  min-width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
  font-size: 22px;
  text-transform: capitalize;
  border-radius: 5px;
}

.slide.active {
  background: #6200ea;
  color: white;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Navigation Controls */
.controls {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

button {
  padding: 10px 20px;
  background-color: #6200ea;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

button:hover {
  background-color: #4b00c3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

JavaScript

const slides = document.querySelectorAll(".slide");
const slider = document.querySelector(".slider");
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");

let currentSlideIndex = 0;

function updateSliderPosition() {
  slider.style.transform = `translateX(-${currentSlideIndex * 100}%)`;
}

function updateActiveSlide() {
  slides.forEach((slide, index) => {
    slide.classList.toggle("active", index === currentSlideIndex);
  });
}

function updateButtonState() {
  // Disable "Previous" button if on the first slide
  prevButton.disabled = currentSlideIndex === 0;

  // Disable "Next" button if on the last slide
  nextButton.disabled = currentSlideIndex === slides.length - 1;
}

function goToPrevSlide() {
  if (currentSlideIndex > 0) {
    currentSlideIndex--;
    updateActiveSlide();
    updateSliderPosition();
    updateButtonState();
  }
}

function goToNextSlide() {
  if (currentSlideIndex < slides.length - 1) {
    currentSlideIndex++;
    updateActiveSlide();
    updateSliderPosition();
    updateButtonState();
  }
}

// Event Listeners
prevButton.addEventListener("click", goToPrevSlide);
nextButton.addEventListener("click", goToNextSlide);

// Initialize
updateButtonState();

Code & Preview

You can download the source file for free by clicking the Source File button. You can also edit and view a live demo by clicking the Edit with CodePen button below.

Source Code

Edit With Codepen