Das Beispiel funktioniert auch ohne Javascript. Dann muss die Benutzer:in jedoch die waagrechten Scrollbalken mit dem Cursor „fassen“ und verschieben – was eher ungewohnt ist!
Beachtet, dass die orangen Buttons unsichtbar werden, wenn man in die äußeren Zonen des waagrechten Scrollens kommt – das wird ebenfalls via Javascript abgefragt.
Online-Demo
Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
HTML
<!--
die section#sliding ist der "äußere Rahmen", der stehen bleibt
und innerhalb dessen Grenzen waagrecht gescrollt wird
-->
<section id="sliding">
<!-- das "div" nimmt den Inhalt auf und wird waagrecht gescrollt -->
<div>
<figure>
<img src="…" alt="" />
<figcaption>
…
</figcaption>
</figure>
<figure>
<img src="…" alt="" />
<figcaption>
…
</figcaption>
</figure>
<figure>
<img src="…" alt="" />
<figcaption>
…
</figcaption>
</figure>
<!-- usw… --/>
</div>
</section>
CSS
/* ======================= horizontaler Scroller ======================= */
/* äußerer Rahmen */
#sliding {
margin: 1em 0;
background-color: #fff;
position: relative;
width: 100%;
/* Höhe so einstellen, dass innerhalb des Scroller
nicht zusätzlich vertikal gescrollt werden kann! */
height: 510px;
}
/* breiter, waagrechter Streifen, der gescrollt wird */
#sliding div {
display: grid;
/* hier muss die richtige Anzahl stehen! Wieviele Sachen wollt Ihr zeigen… */
grid-template-columns: repeat(15, auto);
grid-gap: 1vw;
overflow: scroll;
}
#sliding div img {
/* hier die Höhe festlegen */
height: 400px;
width: auto;
}
JS
// welche Schritte soll die Animation machen?
// umso größer der Wert, umso "ruckliger" wird die Animation
// umso kleiner der Wert, desto länger braucht das Scrollen
const steps = 60;
// wie weit soll bei "einmal auf Button klicken" gescrollt werden?
const sprungBreite = 600;
Der Javascript-Code ist zu lang, um ihn hier komplett darzustellen! Behaltet Ihr die HTML-Struktur, Klassen und IDs in Euren Sachen bei, braucht Ihr nur die hier oben aufgeführten Sachen für Eure Bedürfnisse anpassen, der Rest sollte automatisch gehen – schaut in den Source-Code der Datei "script.js", dort habe ich viele Kommentare eingefügt!