So erstellen Sie einen einfachen und funktionalen Slider mit reinem JavaScript 🔥

Heutzutage ist es schwierig, sich eine moderne Website ohne einen praktischen Slider vorzustellen. 🔥 Slider machen eine Webseite dynamischer und attraktiver, helfen, mehr Inhalte anzuzeigen und sparen Platz auf dem Bildschirm.

In diesem Artikel erfahren Sie, wie Sie einige beliebte Arten von Slidern erstellen, wobei Sie nur reines JavaScript und keine zusätzlichen Bibliotheken verwenden. Dies wird dazu beitragen, dass Ihr Projekt leicht, schnell und einfach zu warten bleibt. Los geht's!

📌 Warum reines JavaScript und keine Bibliothek?

Natürlich sind Bibliotheken wie Swiper, OwlCarousel oder SlickJS sehr praktisch. Aber reines JavaScript hat klare Vorteile:

• 🚀 Kleinere Seitengröße und höhere Ladegeschwindigkeit;

• 🎯 Volle Kontrolle über die Funktionalität;

• 🛠️ Möglichkeit der flexiblen und punktgenauen Anpassung an bestimmte Aufgaben.

🔖 Elemente eines einfachen Sliders: Was ist der Zweck von jedem von ihnen?

Bevor wir mit dem Schreiben von Code beginnen, wollen wir herausfinden, warum wir Elemente in der HTML- und CSS-Struktur für unseren Slider benötigen.

• Slider-Container (slider): der Hauptblock, der den sichtbaren Bereich der Folien begrenzt.

• Folien-Container (slides): der innere Block, der die Bilder (Folien) enthält. Mit CSS bewegt sich dieser Block beim Wechseln der Folien nach links oder rechts.

• Steuertasten (prev und next): Ermöglichen dem Benutzer, manuell zwischen den Folien zu wechseln.

🖥️ Beispiel Nr. 1: Grundlegender horizontaler Schieberegler mit Schaltflächen

Erstellen wir ein 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 für Stile:

.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, Erklärung der Logik:

// Wir erhalten DOM-Elemente
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0; // Aktuelle Folie

// Folienwechsel-Funktion
function showSlide(index) {
  if (index < 0) {
    currentSlide = images.length - 1; // Wenn es weniger als das erste ist, gehen wir zum letzten
  } else if (index >= images.length) {
    currentSlide = 0; // Wenn es mehr als das letzte gibt, gehen wir zum ersten
  } else {
    currentSlide = index;
  }

  // Verschieben Sie den Foliencontainer an die gewünschte Position
  slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}

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

🎨 Beispiel Nr. 2: Automatischer Endlos-Slider mit Fade-Effekt

Diese Option eignet sich für Banner oder Galerien mit nahtlosem Übergang.

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-Stile:

.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 für den Slider:

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

function fadeShowSlide() {
  slidesFade.forEach(slide => slide.classList.remove('active')); // Entfernen Sie die aktive Klasse
  currentFade = (currentFade + 1) % slidesFade.length; // Weiter zur nächsten Folie
  slidesFade[currentFade].classList.add('active'); // Wir zeigen die aktuelle Folie
}

// Automatische Umschaltung alle 4 Sekunden
setInterval(fadeShowSlide, 4000);

📱 Beispiel Nr. 3: Adaptiver Schieberegler mit Unterstützung für mobiles Swipen

Dieser Schieberegler kann auf mobilen Geräten durch Wischen umgeschaltet werden.

Allgemeines JS-Prinzip zur Implementierung von 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); // nach links wischen
  }
  if (endX - startX > 50) {
    showSlide(currentSlide - 1); // nach rechts wischen
  }
});

🎯 Möchten Sie Ihre JavaScript-Kenntnisse noch weiter verbessern?

Beginnen Sie mit der Programmierung mit der App Kodik! 👨‍💻
Kodik ist eine praktische Anwendung, mit der Sie JavaScript und andere Technologien mithilfe interaktiver Lektionen und interessanter Aufgaben leicht erlernen können.