Wie Sie mit JavaScript einen Image Slider erstellen, um Ihre Website aufzupeppen

Wie man mit JavaScript Bildschieberegler erstellt, um Ihre Website aufzuwerten

Haben Sie sich schon einmal in einer Situation befunden, in der Sie mehrere Bilder/Videos auf einem Abschnitt einer Webseite anzeigen möchten, aber nicht zu viel Platz benötigen? Möchten Sie Ihren Webseiten Interaktivität hinzufügen oder sie attraktiver gestalten?

Ein Bildschieberegler kann Ihnen diese Mühe ersparen. In diesem Artikel werden wir einen Image Slider definieren, die Voraussetzungen für die Erstellung eines Image Sliders erläutern und zeigen, wie Sie einen solchen mit HTML, JavaScript und CSS erstellen können.

Was ist ein Image Slider?

Slider sind Karussells oder Diashows, die Texte, Bilder oder Videos anzeigen. Dieser Artikel konzentriert sich auf Bild-Slider. Die meisten Webentwickler verwenden Slider auf der Homepage, um Angebote oder die wichtigsten Informationen zu präsentieren.

Dies sind einige Gründe, warum Sie Slider auf Ihren Webseiten verwenden sollten.

Verbessern Sie die Benutzerfreundlichkeit: Eine ideale Webseite sollte kompakt sein, damit die Endbenutzer nicht scrollen und scrollen müssen, um an wichtige Daten zu gelangen. Wenn Sie mehrere Bilder haben, können Sie den Nutzern das lästige Scrollen ersparen, indem Sie sie in einem Schieberegler anzeigen lassen.
Visuelle Attraktivität: Die meisten Benutzer einer Website verbringen nicht viel Zeit auf einer einfachen Webseite. Mit Schiebereglern und Animationen können Sie die visuelle Attraktivität verbessern.
Sparen Sie Platz: Wenn Sie etwa 20 Bilder auf Ihrer Webseite anzeigen möchten, nehmen diese unter Umständen viel Platz in Anspruch. Mit einem Schieberegler können Sie Platz sparen und den Nutzern trotzdem den Zugriff auf alle Bilder ermöglichen.
Zeigen Sie dynamische Inhalte an: Sie können Slider verwenden, um dynamische Inhalte wie Einbettungen in soziale Medien, Blogs und Nachrichten anzuzeigen.

Voraussetzungen für die Erstellung eines Image Sliders

Ein grundlegendes Verständnis von HTML: Wir werden hier die Struktur des Sliders beschreiben. Sie sollten sich im Umgang mit verschiedenen HTML-Tags, Klassen und divs auskennen.
Ein grundlegendes Verständnis von CSS: Wir werden CSS verwenden, um unsere Bildslider und Schaltflächen zu gestalten.
Ein grundlegendes Verständnis von JavaScript: Wir werden JavaScript verwenden, um die Bildschieberegler responsiv zu machen.
Ein Code-Editor : Sie können einen Code-Editor Ihrer Wahl verwenden. Ich werde Visual Studio-Code verwenden.
Eine Sammlung von Bildern.

Einrichten des Projektordners

Wir brauchen einen Projektordner, einen Bilderordner darin und HTML-, CSS- und JavaScript-Dateien. Ich werde mein Projekt "Image-Slider" nennen. Sie können Ihr Projekt manuell erstellen oder diese Befehle verwenden, um loszulegen;

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Fügen Sie alle Ihre Bilder in den Ordner "Images" ein, den wir im Projektordner erstellt haben, und gehen Sie zum nächsten Schritt über.

Dies ist mein Projektordner, in dem ich sechs Bilder hinzugefügt habe, die ich für die Erstellung eines Sliders verwenden werde. Unser gesamter HTML-Code befindet sich in der Datei index.html.

Arten von Image Sliders

Es gibt zwei Arten von Image Sliders: einen automatischen Slider und einen automatischen Image Slider mit Schaltflächen.

#1. Automatischer Bild-Schieberegler

Ein automatischer Schieberegler blättert nach einer bestimmten Zeit, z.B. 3 Sekunden, automatisch zum nächsten Bild.

HTML-Code

Dies ist mein HTML-Code;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dokument</title>
 <link rel="stylesheet" href="styles.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
 <div id="slider">
 <div class="slide">
 <h1>Afrika</h1>
 <img src="Images/img1.jpg" alt="Bild 1">
 </div>
 <div class="slide">
 <h1>Amerikanisch</h1>
 <img src="Images/img2.jpg" alt="Bild 2">
 </div>
 <div class="slide">
 <h1>Asiatisch</h1>
 <img src="Images/img3.jpg" alt="Bild 3">
 </div>
 <div class="slide">
 <h1>Arabisch</h1>
 <img src="Images/img4.jpg" alt="Bild 4">
 </div>
 <div class="slide">
 <h1>Modern </h1>
 <img src="Images/img5.jpg" alt="Bild 5">
 </div>
 <div class="slide">
 <h1>Europäisch </h1>
 <img src="Images/img6.jpg" alt="Bild 6">
 </div>
 </div>

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


</body>
</html&gt>

Anhand dieses Codes können wir das Folgende feststellen;

Ich habe meine CSS-Datei in die index.html im Abschnitt <head> importiert. Diese wird in späteren Schritten verwendet.

<link rel="stylesheet" href="styles.css">

Ich habe meinen HTML-Code kurz vor dem abschließenden <body>-Tag JavaScript hinzugefügt. Ich werde JavaScript verwenden, um die Funktionalität der Schieberegler zu erweitern.
Jede Folie hat die Klasse slide.
Ich habe den <img>-Tag verwendet, um Bilder aus dem Ordner Images zu importieren.

Gestalten Sie den automatischen Bildslider mit CSS

Da wir bereits CSS- und HTML-Dateien miteinander verknüpft haben, können wir nun unsere Bilder gestalten.

Fügen Sie diesen Code in Ihre CSS-Datei ein;

#slider {
 width: 80%;
 }
  
 .slide {
 width: 80%;
 display: none;
 position: relative;
 }
  
 .slide img {
 Breite: 80%;
 Höhe: 80%;
 }
  
 .slide.active {
 display: block;
 }

Anhand dieses Codes können wir das Folgende feststellen;

Wir haben die Breite und Höhe unseres Schiebereglers auf 80% gesetzt
Wir haben das aktive Dia auf block gesetzt, d.h. nur das aktive Dia wird angezeigt, während die anderen ausgeblendet sind.

So fügen Sie JavaScript hinzu, um den Bildslider responsiv zu machen

Fügen Sie diesen Code in Ihre Datei ein script.js ein;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
 slides[currentSlide].className = 'slide';
 currentSlide = (currentSlide 1)%slides.length;
 slides[currentSlide].className = 'slide active';
}

Dieses JavaScript tut Folgendes;

Wir verwenden den Selektor document.querySelectorAll, um alle Elemente mit der Klasse slide auszuwählen.
Wir geben dem currentSlide den Anfangswert 0.
Wir setzen das slideInterval auf 2000 (2 Sekunden), d.h. die Bilder im Schieberegler werden alle 2 Sekunden gewechselt.
Dieser Code slides[currentSlide].className = 'slide'; entfernt die aktive Klasse von der aktuellen Folie
Dieser Code currentSlide = (currentSlide 1 ) % slides.length; erhöht den Index der aktuellen Folie.
Dieser Code slides[currentSlide].className = 'slide active'; fügt die aktive Klasse zur aktuellen Folie hinzu.

Der automatische Schieberegler funktioniert wie folgt;

#2. Automatischer Schieberegler mit Schaltflächen

Der von uns erstellte Bildschieberegler scrollt automatisch alle 2 Sekunden. Jetzt können wir ein Bild erstellen, bei dem der Benutzer durch Anklicken einer Schaltfläche zum nächsten Dia wechseln kann oder das automatisch alle 3 Sekunden gescrollt wird, wenn der Benutzer nicht auf die Schaltflächen klickt.

HTML-Code

Sie können den Inhalt Ihrer index.html-Datei wie folgt ändern;

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Bild-Schieberegler</title>
 <link
 rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 />
 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
 <div class="container">

 <div class="mySlides">
 <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
 </div>
      
 <div class="mySlides">
 <img src="Images/img2.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img3.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img4.jpg" style="width:100% ; height:50vh">
 </div>
      
 <div class="mySlides">
 <img src="Images/img5.jpg" style="width:100% ; height:50vh">
 </div>
      
      
 <a class="prev" onclick="plusSlides(-1)">❮</a>
 <a class="next" onclick="plusSlides(1)">❯</a>
      
 <div class="caption-container">
 <p id="caption"></p>
 </div>
      
 <div class="row">
 <div class="column">
 <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Europäisch">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Afrika">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Amerikanisch">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Asiatisch">
 </div>
 <div class="column">
 <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Modern">
 </div>
          
 </div>
 </div>

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

Dieser HTML-Code funktioniert wie folgt;

Wir haben eine Klasse namens mySlides, die unsere fünf Bilder enthält.
Wir haben zwei Schaltflächen, "prev" und "next" mit einem onClick, mit denen der Benutzer durch die Folien blättern kann.
Wir haben eine Miniaturansicht, die die Bilder im unteren Teil der Webseite anzeigt.

CSS-Code

Fügen Sie dies zu Ihrem Code hinzu;

* {
 box-sizing: border-box;
}

.container {
 position: relative;
}

.mySlides {
 justify-content: center;
}

.cursor {
 cursor: pointer;
}

.prev,
.next {
 cursor: pointer;
 position: absolute;
 top: 40%;
 width: auto;
 padding: 16px;
 margin-top: -50px;
 color: rgb(34, 143, 85);
 font-weight: bold;
 font-size: 20px;
 border-radius: 0 3px 3px 0;
 user-select: none;
 -webkit-user-select: none;
}

.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
 background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
 text-align: center;
 background-color: orangered;
 padding: 2px 16px;
 color: white;
}

.row:after {
 content: "";
 display: table;
 clear: both;
}

.column {
 float: left;
 width: 16.66%;
}

.demo {
 opacity: 0.6;
}

.active,
.demo:hover {
 opacity: 1;
}

Der CSS-Code funktioniert wie folgt;

Wir haben die Display-Eigenschaft der Klasse .mySlides auf keine gesetzt, was bedeutet, dass alle Folien standardmäßig ausgeblendet sind.
Über die Regel active, .demo:hover {opacity: 1;} haben wir die Deckkraft der Miniaturansichten, über die der Mauszeiger bewegt wird, auf 1 gesetzt.

JavaScript-Code

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
 showSlides(slideIndex = n);
}

function currentSlide(n) {
 showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
 plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
 clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
 slideInterval = setInterval(() => {
 plusSlides(1);
 }, 3000);
});

function showSlides(n) {
 let i;
 let slides = document.getElementsByClassName("mySlides");
 let dots = document.getElementsByClassName("demo");
 let captionText = document.getElementById("caption");
 if (n > slides.length) {slideIndex = 1}
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i ) {
 slides<x><x>[i]</x></x>.style.display = "none";
 }
 for (i = 0; i < dots.length; i ) {
 dots<x><x>[i]</x></x>.className = dots<x><x>[i]</x></x>.className.replace(" active", "");
 }
 slides[slideIndex-1].style.display = "block";
 dots[slideIndex-1].className = " active";
 captionText.innerHTML = dots[slideIndex-1].alt;
}

Den endgültigen Quellcode finden Sie hier.

Unser JavaScript-Code geht folgendermaßen vor;

Wir haben eine currentSlide-Funktion mit einem auf none eingestellten Anzeigewert. Diese Regel ermöglicht es unserer Webseite, nur die aktuelle Folie anzuzeigen.
Wir haben eine Funktion plusSlides, die den angegebenen Wert von slideIndex addiert/subtrahiert, um zu bestimmen, welche Folie angezeigt werden soll.
Wenn der Benutzer nicht auf die Schaltflächen klickt, werden die Folien nach jeweils 3000 Millisekunden automatisch abgerollt.

Wenn ein Benutzer die Navigationsregisterkarte verwendet, funktioniert unser Bildschieberegler wie folgt;

Wenn der Benutzer nicht auf die Navigationsschaltflächen klickt, wird der Bildschieberegler nach jeweils 3 Sekunden wie folgt automatisch gescrollt;

Image Slider testen und debuggen

Fehler und Irrtümer gehören zum Leben eines Entwicklers dazu, und sie in Ihrem Code zu haben, bedeutet nicht, dass Sie ein schlechter Entwickler sind. Wenn Ihr Code auch nach Befolgung der oben genannten Schritte nicht funktioniert, können Sie diese Test- und Debugging-Optionen ausprobieren, um Fehler zu beheben:

Debuggen Sie jede Datei separat: Unser Code besteht aus drei Dateien, HTML-, CSS- und JavaScript-Dateien. Die drei Sprachen haben unterschiedliche Regeln. Sie können überprüfen, ob Ihre HTML-, CSS- und JavaScript-Codes gültig sind, indem Sie Tools wie den W3C Markup-Validierungsdienst für HTML, CSS-Validator für Ihren CSS-Code und Chrome DevTools zum Testen Ihres JavaScript-Codes verwenden.
Führen Sie verschiedene Testarten durch: Sie können visuelle Tests durchführen, um sicherzustellen, dass die Bilder korrekt angezeigt werden, Performance-Tests, um zu prüfen, ob die Bilder responsiv sind, und funktionale Tests, um sicherzustellen, dass die Bilder navigierbar sind.
Testen Sie Ihren Code mit verschiedenen Bildformaten und -größen: Ein guter Image Slider sollte mit verschiedenen Bildformaten und -größen funktionieren.
Automatisieren Sie Ihre Tests: Automatisierung ist allgegenwärtig, und auch Sie können beim Testen davon profitieren. Sie können Tools wie Selen oder LoadRunner verwenden, um Skripte zur Testautomatisierung zu schreiben und auszuführen. Diese Tools ermöglichen es Ihnen auch, einige Ihrer Tests wiederzuverwenden.
Dokumentieren Sie Ihre Tests: Testen ist ein kontinuierlicher Prozess. Möglicherweise müssen Sie Ihre Tests so lange verbessern, bis Ihr Code wie erwartet funktioniert. Dokumentieren Sie diesen Prozess, damit Ihr Code lesbar und einfach zu referenzieren ist.

Bild-Schieberegler: Bewährte Praktiken

Halten Sie es einfach: Schieberegler sind attraktiv. Halten Sie jedoch die Anzahl der Bilder in einem Schieberegler gering. Ideal sind etwa 4-7 Bilder pro Schieberegler.
Testen Sie Ihre Schieberegler: Testen Sie sie auf ihre Funktionalität, bevor Sie sie online stellen.
Erstellen Sie responsive Slider: Stellen Sie sicher, dass die von Ihnen erstellten Schieberegler auf verschiedene Bildschirmgrößen reagieren.
Verwenden Sie hochwertige Bilder: Nehmen Sie hochwertige Bilder für Ihre Schieberegler auf bzw. laden Sie sie herunter. Das Speichern Ihrer Bilder im SVG-Format ist ein hervorragender Ansatz, da sie ihre Qualität nicht verlieren, wenn Sie ihre Größe ändern.
Ändern Sie die Größe Ihrer Bilder: Sie haben möglicherweise unterschiedliche Bildgrößen und -formate. Sorgen Sie immer dafür, dass die Bilder in einem Slider die gleiche Größe haben. Dies können Sie mit CSS erreichen.

Zusammenfassend

Wir hoffen, dass Sie jetzt einen voll funktionsfähigen Bild-Slider erstellen können, um wichtige Daten auf Ihrer Website anzuzeigen, ohne UI-Frameworks zu verwenden. Sie können den gleichen Ansatz verwenden, um Video-Slider auf Webseiten zu erstellen.

Titus Kamunya

Autor