HTML & CSS

Manueller Slider mit CSS und sehr wenig Javascript

Die Webtechnologie bleibt nicht stehen und gelegentlich lohnt es sich, zu überprüfen, ob einige Techniken immer noch so kompliziert umgesetzt werden müssen, wie man das die letzten 10 Jahre getan hat.

 

 

In diesem Fall, habe ich mich gefragt, warum man einen Slider nicht einfach über die vorhandene Scroll- bzw. Swipe-Funktion eines Browsers realisieren kann.

Ein Slider meint hier die Möglichkeit, sich in einer Liste von Elementen vorwärts und rückwärts zu bewegen. Diese Funktion ist beispielsweise häufig für Produkte oder Bilder zu sehen.  Automatisch zeitgesteuerte Funktionen sind hier nicht mitgemeint, lässt sich aber durch etwas mehr Javascript nachrüsten.

 


 

Beispiel

Die Swipe-Funktionalität stellt der Browser direkt zur Verfügung. Entweder auf mobilen Geräten oder in Desktop-Browsern über die Gerätesimulation eines mobilen (oder responsive) Gerät. In Chrome gelangt man zur Simulation über  F12 und  Strg-Shift-MDie Scrollbar habe ich hier für die Desktop-Ansicht sichtbar belassen, um die Funktion zu verdeutlichen. In einer fertigen Seite würde man diese vermutlich auch dort nicht anzeigen.

1
2
3
4
5
6
«
»

 


 

Erklärung

Für die Funktion werden wenige HTML- bzw. CSS-Techniken verwendet, die neueste davon (scroll-snap-type) ist von ca. 2016.
Die Basis, ein horizontal scrollbarer Bereich, wird durch ein Flex-Layout ohne Umbrüche und einige Elemente mit einer fixen Breite erreicht.  Die genaue Anzahl von Elementen, die nebeneinander sichtbar sein sollen, ist hierbei die einzige Stellschraube, auf die man achten sollte. Hier würde man mit Media-Queries die min-width unterschiedlich einstellen, je nach verfügbarer (Device-) Breite.

 

<style>
  .slider {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .slider .element {
    min-width: calc((100% - 15px)/2); <!-- For exactly two visible elements -->
    height: 200px;
    margin-right: 15px;
    background-color: grey;
  }
  .slider .element:last-of-type {
    margin-right: 0;
  }
</style>

<div class="slider">
  <div class="element>1</div>
  <div class="element>2</div>
  <div class="element>3</div>
</div>

Das "snappy" Swipe-Verhalten, dass nur immer ganze Elemente weit gescrollt werden kann, wird durch eine CSS-Scroll-Angabe beim Slider selbst und seinen Elementen erreicht:

<style>
  .slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .slider .element {
    scroll-snap-align: start;
  }
</style>

Die Links- und Rechts-Buttons und ihre Funktion werden durch absolut positionierte Elemente, ein zusätzliches Wrapper-Element und Javascript-Click-Handler erreicht:

<style>
  .slider-arrows-parent {
    position: relative;
    width: 100%;
  }
  .arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
  }
  .arrow.left {
    left: 0;
  }
  .arrow.right {
    right: 0;
  }
</style>

<div class="slider-arrows-parent">
  <div class="slider">
    <div class="element>1</div>
    <div class="element>2</div>
    <div class="element>3</div>
  </div>
  <div class="arrow left">«</div>
  <div class="arrow right">»</div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const slider = document.querySelector(".slider");
    const firstElement = slider.querySelector(".element:first-of-type");

    if (slider === undefined || firstElement === undefined) {
      return;
    }

    document.querySelector(".arrow.left").addEventListener("click", function() {
      slider.scrollLeft -= firstElement.clientWidth;
    });
    document.querySelector(".arrow.right").addEventListener("click", function() {
      slider.scrollLeft += firstElement.clientWidth;
    });
  });
</script>

 


Zusammenfassung

Mit nur ca. 30 Zeilen Styling und 10 Zeilen Javascript kann ein Slider (Swiper) erstellt werden, der in allen modernen Browsern funktioniert. Insbesondere funktioniert er wie ein natives Browser-Element für diesen Zweck, da er genau das ist.
Weitere Funktionen wie z. B. eine Automatik oder auch das Scrollen mehrerer Elemente gleichzeitig sollten sich ebenso leicht ergänzen lassen.

 

Unsere Kunden

  • baumit logo sw baumit logo
  • libri grey libri
  • alpenverein grey alpenverein
  • Logo genialokal Logo genialokal
  • ambiente grey ambiente
  • Logo Tischwelt Logo Tischwelt
  • Logo Zündstoff Logo Zündstoff
  • Logo Burda Logo Burda
  • Streit Streit