L
leih
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
Hallo,
Ich wollte mit Hilfe eines Video Tutorials einen "carousel slider" erstellen.
Ich habe das ganze genau wie im Tutorial nachgemacht, aber wenn ich auf right/left (also die Wörter die später noch mit Pfeilen ersetzt werden) klicke passiert nichts.
Ich habe meinen Code jetzt schon ein paar mal durchgesehen, kann aber keinen Fehler finden.
Vielleicht kann mir ja jemand weiterhelfen.
Das hier ist er (css und js sind in separaten Dateien):
CSS:
JS:
Ich wollte mit Hilfe eines Video Tutorials einen "carousel slider" erstellen.
Ich habe das ganze genau wie im Tutorial nachgemacht, aber wenn ich auf right/left (also die Wörter die später noch mit Pfeilen ersetzt werden) klicke passiert nichts.
Ich habe meinen Code jetzt schon ein paar mal durchgesehen, kann aber keinen Fehler finden.
Vielleicht kann mir ja jemand weiterhelfen.
Das hier ist er (css und js sind in separaten Dateien):
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="Unterseite_1.css" type="text/css" rel="stylesheet">
<script src='https://code.jquery.com/jquery-3.6.1.js'></script>
<script type="text/javascript" src="Unterseite_1.js"></script>
</head>
<body>
<div class="container">
<div class="carousel">
<div class="slider">
<section>Content for section 1</section>
<section>Content for section 2</section>
<section>Content for section 3</section>
<section>Content for section 4</section>
</div>
<div class="controls">
<span class="arrow left">left</span>
<span class="arrow right">right</span>
</div>
</div>
</div>
</body>
</html>CSS:
CSS:
.container {
width: 80%;
margin: 10px auto;
background-color: black;
}
.carousel {
border: 2px solid #ccc;
height: 400px;
position: relative;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
border: 1px solid red;
transition: all 0.3s;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
span, section {
color: white;
}
.controls .arrow {
position: absolute;
top: 50%;
cursor: pointer;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}JS:
Javascript:
const slider = document.querySelector('.slider');
const leftArrow = document.querySelector('.left');
const rightArrow = document.querySelector('.right');
var sectionIndex = 0;
leftArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex > 0) ? sectionIndex - 1 : 0;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
});
rightArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex < 3) ? sectionIndex + 1 : 3;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
});