How to create a simple and functional slider in pure JavaScript 🔥

Today it is difficult to imagine a modern website without a convenient slider. 🔥 Sliders make a web page more dynamic and attractive, help to show more content and save space on the screen.

In this article, you will learn how to create several popular types of sliders using only pure JavaScript and no additional libraries. This will help your project stay light, fast and easy to maintain. Let's go!

📌 Why pure JavaScript and not a library?

Of course, libraries like Swiper, OwlCarousel or SlickJS are very convenient. But pure JavaScript has clear advantages:

• 🚀 Smaller page size and faster loading speed;

• 🎯 Full control over the functionality;

• 🛠️ Possibility of flexible and point-to-point adjustment for specific tasks.

🔖 Elements of a simple slider: what is each of them for?

Before we start writing code, let's figure out why we need elements in the HTML and CSS structure for our slider.

• Slider container (slider): the main block that limits the visible area of the slides.

• Slide container (slides): the inner block that contains the images (slides). Using CSS, this block will move left or right, switching slides.

• Control buttons (prev and next): allow the user to switch between slides manually.

🖥️ Example 1: Basic horizontal slider with buttons

Let's create an HTML framework:

<div class="slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>

  <button class="prev">←</button>
  <button class="next">→</button>
</div>

CSS for styles:

.slider {
  width: 800px;
  overflow: hidden; /* Скрываем лишние слайды */
  position: relative;
  margin: auto;
}

.slides {
  display: flex; /* Располагаем изображения горизонтально */
  transition: transform 0.5s ease; /* Анимация перехода */
}

.slides img {
  width: 800px; /* Ширина каждого слайда равна ширине слайдера */
  flex-shrink: 0; /* Запрещаем сжатие изображений */
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript, explanation of logic:

// Getting DOM elements
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0; // Current slide

// Slide switching function
function showSlide(index) {
  if (index < 0) {
    currentSlide = images.length - 1; // If less than the first, go to the last
  } else if (index >= images.length) {
    currentSlide = 0; // If it's more than the last one, go to the first one
  } else {
    currentSlide = index;
  }

  // Moving the slide container to the desired position
  slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}

// Click processing
prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));

🎨 Example 2: Automatic infinite slider with fade effect

This option is suitable for banners or galleries with smooth switching.

HTML code:

<div class="fade-slider">
  <img class="fade-slide active" src="slide1.jpg">
  <img class="fade-slide" src="slide2.jpg">
  <img class="fade-slide" src="slide3.jpg">
</div>

CSS styles:

.fade-slider {
  position: relative;
  width: 800px;
  height: 500px;
  margin: auto;
}

.fade-slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  width: 100%;
  height: 100%;
}

.fade-slide.active {
  opacity: 1;
}

JavaScript for slider operation:

const slidesFade = document.querySelectorAll('.fade-slide');
let currentFade = 0;

function fadeShowSlide() {
  slidesFade.forEach(slide => slide.classList.remove('active')); // Remove the active class
  currentFade = (currentFade + 1) % slidesFade.length; // Moving on to the next slide
  slidesFade[currentFade].classList.add('active'); // Showing the current slide
}

// Automatic switching every 4 seconds
setInterval(fadeShowSlide, 4000);

📱 Example 3: Adaptive slider with mobile swipe support

This slider can be switched by swiping on mobile devices.

General JS principle for implementing swipes:

const slider = document.querySelector('.slides');
let startX = 0;
let endX = 0;

slider.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', e => {
  endX = e.touches[0].clientX;
});

slider.addEventListener('touchend', () => {
  if (startX - endX > 50) {
    showSlide(currentSlide + 1); // swipe left
  }
  if (endX - startX > 50) {
    showSlide(currentSlide - 1); // swipe right
  }
});

🎯 Want to level up your JavaScript skills even more?

Start learning programming with the application Code! 👨‍💻
Kodik is a convenient application that will help you easily master JavaScript and other technologies with the help of interactive lessons and interesting tasks.