Heute möchte ich euch zeigen wie man einen scrollbaren Slider nur mit CSS erstellen kann. Dieser slider läuft nicht automatisch durch sondern ihr könnt es euren Webseitenbesucher selbst überlassen die Bilder anzuschauen und sie können selbst entscheiden wie schnell sie scrollen wollen.

Eine perfekte Lösung zum Beispiel für alle Künstler die gerne ihre Werke zeigen möchten und dabei ihre Besucher nicht stressen wollen.

Und alles läuft ohne Javascript ab sondern nur mit reinem HTML und CSS Code.

Video

HTML

<div class="slider">
        <div class="slider-track">
            <img src="bilder/bild1.jpg" class="bilder">
            <img src="bilder/bild2.jpg" class="bilder">
            <img src="bilder/bild3.jpg" class="bilder">
            <img src="bilder/bild4.jpg" class="bilder">
            <img src="bilder/bild1.jpg" class="bilder">
            <img src="bilder/bild2.jpg" class="bilder">
            <img src="bilder/bild3.jpg" class="bilder">
            <img src="bilder/bild4.jpg" class="bilder">
            <img src="bilder/bild1.jpg" class="bilder">
            <img src="bilder/bild2.jpg" class="bilder">
            <img src="bilder/bild3.jpg" class="bilder">
            <img src="bilder/bild4.jpg" class="bilder">
        </div>
    </div>

CSS

.slider {
    width: 90vw;
    height: 45vw;
    overflow-x: scroll;
    scrollbar-width: none;
    cursor: grab;
}

.slider::-webkit-scrollbar {
    display: none;
}

.slider-track {
    width: max-content;
    height: inherit;
    display: flex;
    gap: 0.25rem
}

.bilder {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.slider.active {
    cursor: grabbing;
}


@media (min-width: 1024px) {
    .bilder {
        width: 800px;
    }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
    .bilder {
        width: 600px;
    }
}

/* Handy */
@media (max-width: 768px) {
    .bilder {
        width: 400px;
    }

}