Slideshow
HTML
<html lang="de">
<head>
</head>
<body>
<div class="slide_wrapper">
<div class="slide_paar">
<img src="#" alt="Bild 1">
<div class="slide_text">Image 1</div>
</div>
<div class="slide_paar">
<img src="#" alt="Bild 1">
<div class="slide_text">Image 2</div>
</div>
<div class="slide_paar">
<img src="#" alt="Bild 1">
<div class="slide_text">Image 3</div>
</div>
<div class="slide_paar">
<img src="#" alt="Bild 1">
<div class="slide_text">Image 4</div>
</div>
<div class="slide_weiter">→</div>
<div class="slide_zuruck">←</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
margin:0;
background-color: rgb(3,3,124);
font-family:sans-serif;
}
.slide_wrapper {
width:60%;
border:1px solid white;
margin:50px auto 0;
box-shadow:10px 20px 70px rgba(255,255,255,0.5);
position:relative;
}
.slide_paar {
width:100%;
display:none;
}
.slide_sichtbar {
display:block;
}
.slide_paar >img {
width:100%;
display:block;
animation:ubergang 2s;
}
@keyframes ubergang{
from {opacity:0.2;}
to {opacity:1;}
}
.slide_text {
color:white;
font-size:4em;
display:flex;
justify-content:center;
border-top:1px solid white;
}
.slide_weiter,.slide_zuruck {
color:white;
font-size:4em;
cursor:pointer;
position:absolute;
bottom:0;
transition:0.5s;
}
.slide_weiter {
right:10px;
}
.slide_zuruck {
left:10px;
}
@media (max-width:1000px){
.slide_text,.slide_weiter,.slide_zuruck {
font-size:2em;
}
}
@media (max-width:600px){
.slide_wrapper {
width:85%;}
}
@media (min-width:900px){
.slide_weiter:hover,.slide_zuruck:hover {
opacity:0.7;
}
}
JS
document.addEventListener("DOMContentLoaded", function () {
let slide = document.querySelectorAll(".slide_paar");
let weiter = document.querySelector(".slide_weiter");
let zuruck = document.querySelector(".slide_zuruck");
let zaehler = 0;
slide[zaehler].classList.add("slide_sichtbar");
weiter.addEventListener("click", zaehlerHoch);
function zaehlerHoch() {
zaehler = zaehler + 1;
if (zaehler >= slide.length) {
zaehler = 0;
}
slider();
}
zuruck.addEventListener("click", zaehlerRunter);
function zaehlerRunter() {
zaehler = zaehler - 1;
if (zaehler < 0) {
zaehler = slide.length - 1;
}
slider();
}
function slider() {
let slideNichtSichtbar = document.querySelector(".slide_sichtbar");
slideNichtSichtbar.classList.remove("slide_sichtbar");
slide[zaehler].classList.add("slide_sichtbar");
}
})