Einführung
Slider sind eine Reihe von Bildern, die nacheinander durchgescrollt werden können. Die Bilder eines Sliders können Fotos, Videos oder sogar HTML-Elemente (wie Beschreibungen oder Kommentare) enthalten. Slider sind auf vielen modernen Websites zu finden. Entwickler nutzen sie, um Informationen über die Website übersichtlich darzustellen, ohne dabei zu viel Platz einzunehmen.
Angenommen, ein Entwickler erstellt eine Produktwebsite. Dann möchte er dem Nutzer vielleicht Kundenmeinungen oder Rezensionen präsentieren, damit dieser ihnen vertraut und das Produkt kauft. Der Entwickler kann einen Slider erstellen, in dem Nutzer die einzelnen Rezensionen bequem durchblättern und lesen können. Dasselbe gilt für Produktbilder: Ein Entwickler kann einen Slider mit Produktbildern erstellen, sodass der Nutzer eine 360-Grad-Ansicht des Produkts erhält.
Voraussetzungen
Wir lernen, wie man mit HTML, CSS und JavaScript einen einfachen CSS-Bildslider erstellt. Um das Ganze und unsere Vorgehensweise vollständig zu verstehen, sollten Sie einige Grundlagen kennen. Schauen wir sie uns an.
- HTML: Sie sollten über Grundkenntnisse in HTML verfügen, insbesondere über die Verwendung von Elementen und Tags. Wir werden verschiedene Tags und Elemente verwenden, um einen Slider zu erstellen. Daher sollten Sie die Funktion jedes einzelnen Tags bzw. Elements in unserem Slider kennen.
- CSS: Wir werden CSS intensiv zur Erstellung des Sliders verwenden. Sie sollten mit einigen fortgeschrittenen CSS-Konzepten wie Stacking, z-Index, Position und Animationen vertraut sein. All diese Kenntnisse werden für die Erstellung des Sliders benötigt.
- JavaScript: Sie sollten grundlegende JavaScript-Kenntnisse besitzen, wie z. B. Variablendeklaration, Verwendung von for-Schleifen und DOM-Manipulation. Diese werden verwendet, um den Schieberegler zu steuern und Effekte zu erzeugen.
Sobald Sie mit all diesen Konzepten vertraut sind, erstellen wir einen Schieberegler. Wir werden jedes Konzept Schritt für Schritt durchgehen und erklären, warum wir so vorgehen.
Schritt 1: Erstellen Sie ein einfaches Bild-Slider-Layout mithilfe von HTML-Code
Erstellen wir nun das Grundgerüst unseres Sliders. Wie bereits erwähnt, besteht ein Slider aus mehreren Frames. Wir erstellen einen CSS-Bildslider.
Zuerst erstellen wir das übergeordnete Div-Element, das die Slider-Bilder und die Funktionalität enthält. Anschließend fügen wir einige Stileinstellungen hinzu, wie z. B. die Hintergrundfarbe zu ändern und die Höhe und Breite des übergeordneten Div-Elements festzulegen.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>Sobald das erledigt ist, gehen wir zum nächsten Teil über.
Schritt 2: Zurück- und Weiter-Schaltflächen hinzufügen
Slider verfügen über zwei Schaltflächen: „Zurück“ und „Weiter“. Diese dienen der Navigation durch die einzelnen Slider-Bilder. Wir fügen unserem übergeordneten Bereich weitere Schaltflächen hinzu. Diese Schaltflächen erleichtern dem Benutzer die Navigation durch die Bilder im Karussell. Der Einfachheit halber verwenden wir < und > als Schaltflächentext, die für „Zurück“ bzw. „Weiter“ stehen.
Zusätzlich zum Hinzufügen der grundlegenden HTML-Schaltflächen werden wir diese leicht anpassen, sodass sie vertikal relativ zum zentrierten Div-Element ausgerichtet sind. Dadurch wird das Scrollen durch den Slider erleichtert. Wir verwenden relative Positionierung für die vertikale Ausrichtung der Schaltflächen.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
</div>
</body>
</html>Ausgabe
Schritt 3: Fügen Sie die benötigten Bilder und Texte zum Slider hinzu.
Nachdem wir die Schaltflächen hinzugefügt haben, fügen wir nun die Bilder hinzu. Wir verwenden die Blumenbilder, um einen CSS-Bildslider zu erstellen. Die Bilder werden mithilfe von `position` und `z-index` übereinander angeordnet. Da nur ein Bild sichtbar sein soll, verwenden wir eine Basisklasse und setzen deren Sichtbarkeit auf `visible`. Die übrigen Bilder bleiben ausgeblendet, damit sie dem Benutzer nicht angezeigt werden.
Der Slider enthält außerdem einen Text, der anzeigt, welches Bild der Nutzer gerade betrachtet. Dies hilft dem Nutzer, sich einen Überblick über die Anzahl der Bilder im Karussell und deren Reihenfolge zu verschaffen.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>
Ausgabe
Schritt 4: Aktivieren Sie die beiden Schaltflächen mithilfe von JavaScript-Code
Wir haben unsere Slider-Klasse erstellt und alle Bilder hinzugefügt. Jetzt müssen wir die Schaltflächen „Zurück“ und „Weiter“ aktivieren. Dazu verwenden wir JavaScript.
Zunächst müssen wir diesen Schaltflächen einen Ereignis-Listener hinzufügen. Jedes Mal, wenn der Benutzer auf die Schaltfläche „Zurück“ oder „Weiter“ klickt, soll eine Aktion ausgeführt werden, die mit dieser Schaltfläche zusammenhängt. Wie gehen wir dabei vor?
Wir haben die Hauptklasse verwendet, um festzulegen, welches Bild dem Benutzer angezeigt werden soll. Wir müssen steuern, welches Bild diese Klasse besitzt. Alle anderen Bilder werden ausgeblendet, und nur das Bild mit der Hauptklasse ist für den Benutzer sichtbar. Dazu verwenden wir DOM-Manipulation. Mithilfe der DOM-Manipulation können wir die Hauptklasse von einem bestehenden Bild entfernen und sie einem neuen Bild hinzufügen.
Um zu bestimmen, welches Bild die Hauptklasse erhalten soll, verwenden wir die Event-Listener der Schaltflächen „Zurück“ und „Weiter“. Zuerst müssen wir alle Bilder im Slider abrufen. Wir sehen, dass das übergeordnete Slider-Karussell die Bilder unterteilt. Dies erreichen wir mithilfe des Query-Selektors im DOM. Sobald wir alle Bild-Divs haben, wählen wir das passende aus und weisen ihm die Hauptklasse zu. Die übrigen Divs erhalten keine Hauptklasse und sind daher für den Benutzer unsichtbar. Wir initialisieren eine Variable, die anfänglich auf 0 zeigt. Diese Variable gibt an, welches Bild aktuell sichtbar ist. Jedes Mal, wenn der Benutzer auf „Weiter“ oder „Zurück“ klickt, erhöhen oder verringern wir den Wert der Variable entsprechend. Ist der Wert 0 und der Benutzer klickt auf das vorherige Bild, ändern wir den Wert auf (Anzahl der Bilder im Div - 1). Befindet sich die Variable hingegen auf dem letzten Bild und der Benutzer klickt auf „Weiter“, ändern wir den Wert auf 0.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Ausgabe
Herzlichen Glückwunsch, Sie haben einen CSS-Slider mit HTML, CSS und JavaScript erstellt.
Diashow-Funktion
Unser Slider wird derzeit manuell gesteuert. Das heißt, das Bild ändert sich erst, wenn der Benutzer auf die Schaltfläche „Zurück“ oder „Weiter“ klickt. Die meisten online verfügbaren Slider funktionieren jedoch anders. Sie bieten einen Diashow-Effekt, der die Bilder nach einer festgelegten Zeit automatisch wechselt.
Das lässt sich auch in unserem Slider realisieren. Mithilfe von JavaScript können wir die Funktion `setInterval` verwenden, die nach einer festgelegten Zeit automatisch die nächste Funktion aufruft. Dadurch funktioniert der Slider automatisch und ändert seinen Wert nach der angegebenen Zeit.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
setInterval(()=>{
nextImage();
},1000);
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Ausgabe
Navigationspunkte
Neben Titel oder Bildtext können Sie in Ihrem Slider auch Navigationspunkte verwenden. Diese funktionieren ähnlich wie Text oder ein Titel und zeigen dem Nutzer an, in welchem Frame er sich gerade befindet. Navigationspunkte werden in vielen modernen Slidern eingesetzt, da sie praktisch und einfach zu erstellen sind. Meist handelt es sich dabei um Optionsfelder.
Der Vorteil von Navigationspunkten liegt darin, dass der Nutzer mühelos auf jedes einzelne Bild des Sliders zugreifen kann. Anders als bei einem herkömmlichen Slider, bei dem jedes Bild einzeln aufgerufen werden muss, ermöglichen Navigationspunkte den direkten Zugriff auf jedes Bild durch Anklicken des entsprechenden Navigationspunktes.
Das Grundprinzip von Navigationspunkten ähnelt dem von verschiebbaren Bildern. Dem aktuellen Bild ist ein Navigationsbutton mit der Klasse „aktiv“ zugeordnet. Nach einem Bildwechsel wird die Klasse „aktiv“ dem aktuellen Bild und dem aktuellen Navigationspunkt hinzugefügt oder dorthin verschoben.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.images {display: none}
img {
vertical-align: middle;
width:100%;
}
/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.previous, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;
//Show current image
showSlides(currentIndex);
//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}
//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}
//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>
Ausgabe
Alternatives Beispiel
Mit JavaScript erstellte Schieberegler funktionieren einwandfrei, solange JavaScript im Browser aktiviert ist. Sobald der Benutzer JavaScript deaktiviert, funktioniert der Schieberegler nicht mehr, da er JavaScript für seine Funktionalität benötigt.
Sie benötigen kein JavaScript, um einen Slider zu erstellen. Sie können ihn sogar nur mit HTML und CSS gestalten. Wichtig ist nur, dass Sie verstehen, wie er funktioniert, wenn der Benutzer auf die Schaltflächen „Zurück“ oder „Weiter“ klickt. Ein mit HTML und CSS erstellter Slider benötigt weniger Arbeitsspeicher und funktioniert auch dann, wenn JavaScript im Browser deaktiviert ist.
Sie können deren Attribute und Eigenschaften verwenden, um eine aktive Klasse zu erstellen. Für den Navigationsbutton können Sie eine aktive Klasse erstellen, die beim Klicken oder Überfahren mit der Maus aktiv wird. Dies funktioniert ähnlich wie in JavaScript, jedoch verwenden wir anstelle von DOM-Manipulation CSS-Funktionen wie `target` usw., um dies zu erreichen.
Wir haben für Sie einen Beispiel-Slider mit HTML und CSS erstellt. Mithilfe von Pseudo-Aktiv-Klassen wie „check“ ermitteln wir, auf welchen Navigationspunkt der Nutzer zuletzt geklickt hat. Anschließend wird das entsprechende Bild angezeigt. Da die Bilder nicht ausgeblendet werden, haben wir für jedes Bild Rand und Innenabstand festgelegt.
<!DOCTYPE html>
<html>
<head>
<title> Slider using HTML and CSS </title>
<style>
img{
height:100%;
width:100%;
}
#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}
/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}
</style>
</head>
<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>
</html>Ausgabe
Ergebnis
- Slider sind eine Reihe von Einzelbildern, die nacheinander durchgescrollt werden können.
- Sie werden heutzutage auf vielen Webseiten verwendet, um Kommentare oder Erfahrungsberichte anzuzeigen.
- Um einen Slider zu erstellen, muss der Benutzer Kenntnisse über Konzepte wie HTML-Tags, CSS-Konzepte wie Stapeln, Positionieren usw. sowie grundlegende JavaScript-Funktionen wie Variablen und DOM-Manipulation besitzen.
- Slider funktionieren, indem sie eine aktive Klasse besitzen, die angezeigt wird. Die übrigen Elemente sind ausgeblendet. Wenn der Benutzer mit der Maus über einen Button oder Punkt fährt, wird das Element mit der aktiven Klasse mithilfe von DOM-Manipulation geändert.
- Wenn JavaScript im Browser des Benutzers nicht aktiviert ist, funktioniert der Schieberegler nicht.
- Sie können einen Slider ausschließlich mit HTML und CSS erstellen. Das spart Browserspeicher und Rechenzeit. Außerdem funktioniert es in jedem Browser, der HTML und CSS unterstützt.
