Ich hatte auch gerade Bedarf an einem Slider und habe mir das gebastelt:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 1rem;
}
.slide-container,
.slide-buttons {
display: flex;
width: 90vw;
margin: 0 auto;
}
.slide-container {
overflow: hidden;
min-height: 50vh;
background-color: antiquewhite;
}
.slide-container div {
display: flex;
justify-content: center;
align-items: center;
min-width: 100%;
min-height: 100%;
background-color: goldenrod;
}
.slide-buttons {
justify-content: space-between;
}
</style>
</head>
<body>
<div class="slide-container">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
<div class="slide">Slide 7</div>
<div class="slide">Slide 8</div>
<div class="slide">Slide 9</div>
</div>
<div class="slide-buttons">
<button id="left">next</button>
<button id="right">prev</button>
</div>
<script>
const slides = document.querySelectorAll("body > div.slide-container > div");
const buttonLeft = document.querySelector("#left");
const buttonRight = document.querySelector("#right");
let i = 0;
buttonRight.style.cssText = "opacity: .3;";
buttonLeft.addEventListener('click', () => {
if (i < slides.length - 1) {
slides[i].style.cssText = "margin-left: -100%; transition: margin-left .7s";
i++;
buttonRight.style.cssText = "opacity: 1;";
};
if (i == slides.length - 1) {
buttonLeft.style.cssText = "opacity: .3;";
};
});
buttonRight.addEventListener('click', () => {
if (i < slides.length && i > 0) {
i--;
slides[i].style.cssText = "margin-left: 0; transition: margin-left .7s";
buttonLeft.style.cssText = "opacity: 1;";
};
if (i == 0) {
buttonRight.style.cssText = "opacity: .3;";
};
});
</script>
</body>
</html>Scheint ganz gut zu funktionieren. Für ordentliche Buttons war ich heute noch zu faul.
