So erstellst du den einfachsten Slider für deine Webseite (HTML & CSS)

Heute zeige ich euch also wie man einen einfachen Slider für seine Webseite bauen kann. Man braucht dazu nur HTML und eine kleine Portion CSS. Damit habt ihr eine gute Basis um auf diese grossen Slider Plugin verzichten zu können.

Video

HTML

<div class="slider">
        <img src="bilder/bild1.jpg" alt="Bild 1">
        <img src="bilder/bild2.jpg" alt="Bild 2">
        <img src="bilder/bild3.jpg" alt="Bild 3">
        <img src="bilder/bild4.jpg" alt="Bild 4">
    </div>

CSS

.slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4/3;
    box-shadow: 20px 20px 10px gray;
    border: 1px solid #000;
    overflow: hidden;
    margin: 30px;
}

.slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fade 8s linear infinite;
    animation-play-state: running;
}

.slider:hover img {
    animation-play-state: paused;
}

.slider img:nth-child(1) {
    animation-delay: 0s;
}

.slider img:nth-child(2) {
    animation-delay: 2s;
}

.slider img:nth-child(3) {
    animation-delay: 4s;
}

.slider img:nth-child(4) {
    animation-delay: 6s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}