Sie können mit HTML und CSS ziemlich weit kommen, wenn Sie einen Slider erstellen

Ein „Slider“, also ein Haufen von Boxen nebeneinander, zwischen denen Sie navigieren können. Sie wissen, was ein Slider ist. Es gibt viele Funktionen, die Sie sich für einen Slider wünschen könnten. Nur als Beispiel: Sie möchten vielleicht, dass der Slider gewischt oder gescrollt werden kann. Oder Sie möchten das vielleicht *nicht* und der Slider soll nur auf Klick- oder Tipp-Buttons reagieren, die zu den Folien navigieren. Oder Sie möchten beides. Oder Sie möchten all das mit Autoplay kombinieren.

Ich sage einfach mal, dass Slider ein ausreichend kompliziertes UI-Element sind, für das **JavaScript** erforderlich ist. Flickity ist ein gutes Beispiel. Ich würde auch sagen, dass Sie mit HTML und CSS allein ziemlich weit kommen können, um einen gut aussehenden, funktionalen Slider zu erstellen. Diesen Weg zu beginnen, erleichtert das JavaScript und ist, traue ich mich zu sagen, ein gutes Beispiel für progressive Enhancement.

Betrachten wir zuerst die semantische Markup.

Ein Haufen von Boxen ist wahrscheinlich so einfach wie

<div class="slider">
  <div class="slide" id="slide-1"></div>
  <div class="slide" id="slide-2"></div>
  <div class="slide" id="slide-3"></div>
  <div class="slide" id="slide-4"></div>
  <div class="slide" id="slide-5"></div>
</div>

Mit ein paar Zeilen CSS können wir sie nebeneinander anordnen und scrollen lassen.

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

Können wir es auch reibungslos auf WebKit-basierten Mobilbrowsern wischen lassen.

.slider {
  ...

  -webkit-overflow-scrolling: touch;
}

Wir können es noch besser machen!

Lassen Sie jede Folie mit Snap-Punkten einrasten.

Dies hat sich seit der ursprünglichen Veröffentlichung ein wenig geändert! Ich aktualisiere die untenstehenden Codeblöcke.

.slider {
  ...

  /* CURRENT way. */
  scroll-snap-type: x mandatory;  

  /* OLD WAY. Probably not worth including at all.

  -webkit-scroll-snap-points-x: repeat(300px);
      -ms-scroll-snap-points-x: repeat(300px);
          scroll-snap-points-x: repeat(300px);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;

   */

}

.slides > div {
  /* CURRENT way. */
  scroll-snap-align: start;
}

Schauen Sie, wie viel schöner es jetzt ist

Sprunglinks

Ein Slider hat wahrscheinlich eine kleine Benutzeroberfläche, um zu einer bestimmten Folie zu springen. Lassen Sie uns das also auch semantisch tun, mit Ankerlinks, die zur richtigen Folie springen.

<div class="slide-wrap">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slider">
    <div class="slide" id="slide-1">1</div>
    <div class="slide" id="slide-2">2</div>
    <div class="slide" id="slide-3">3</div>
    <div class="slide" id="slide-4">4</div>
    <div class="slide" id="slide-5">5</div>
  </div>
  
</div>

Ankerlinks, die tatsächlich als Link zu verwandten Inhalten fungieren, sind semantisch und zugänglich, also keine Probleme damit (fühlen Sie sich frei, mich zu korrigieren, wenn ich falsch liege).

Lassen Sie uns die Dinge ein wenig stylen… und wir haben ein paar Buttons, die ihre Aufgabe erfüllen.

Sowohl auf dem Desktop als auch auf dem Mobilgerät können wir immer noch sicherstellen, dass wir eine reibungslose Schiebeaktion erhalten!

.slides {
  ...
  
  scroll-behavior: smooth;
}

Vielleicht würden wir die Buttons nur in Situationen anzeigen, in denen kein schönes, schnelles Wischen möglich ist?

Wenn der Browser scroll-snap-type unterstützt, bietet er ein schönes, schnelles Wischen. Wir könnten die Buttons einfach ausblenden, wenn wir wollten.

@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

Müssen wir der „aktiven“ Folie etwas Besonderes hinzufügen?

Dafür könnten wir :target verwenden. Wenn einer der Buttons zum Navigieren von Folien geklickt wird, ändert sich die URL zu diesem #Hash, und dann wird :target wirksam. Also.

.slides > div:target {
  transform: scale(0.8);
}

Es gibt eine Möglichkeit, diesen Slider mit dem Checkbox-Hack zu erstellen und trotzdem „aktive Folien“-Dinge mit :checked zu machen, aber man könnte argumentieren, dass das etwas weniger semantisch und zugänglich ist.

Hier ist, wo wir bisher stehen.

Siehe den Pen
Real Simple Slider von Chris Coyier (@chriscoyier)
auf CodePen.

Hier ist, wo die Dinge ein wenig auseinanderfallen.

Die Verwendung von :target ist ein netter Trick, aber er funktioniert zum Beispiel nicht, wenn die Seite ohne Hash geladen wird. Oder wenn der Benutzer von sich aus scrollt oder wischt, ohne die Buttons zu benutzen. Ich glaube nicht, dass es hierfür eine reine HTML- und CSS-Lösung gibt, noch glaube ich, dass das ein völliges Versagen von HTML und CSS ist. Es ist einfach die Art von Ding, für das JavaScript da ist.

JavaScript kann herausfinden, was die aktive Folie ist. JavaScript kann die aktive Folie setzen. Es lohnt sich wahrscheinlich, sich die Intersection Observer API anzusehen.

Was sind weitere Einschränkungen?

Wir haben so ziemlich das Ende dessen erreicht, was mit reinem HTML und CSS allein möglich ist.

• Möchten Sie mit der Maus wischen können? Das ist kein Mausverhalten, also müssen Sie das alles mit DOM-Events machen. Jede Art von exotischem interaktivem Verhalten (z.B. Physik) erfordert JavaScript. Es gibt aber einen seltsamen Trick, um vertikales Scrollen für horizontales zu simulieren.
• Möchten Sie wissen, wann eine Folie geändert wird? Wie ein Callback? Das ist JavaScript-Gebiet.
• Benötigen Sie Autoplay? Sie könnten etwas Rudimentäres mit einer Checkbox, :checked und der Steuerung von animation-play-state einer @keyframes-Animation machen, aber es wird sich begrenzt und ruckelig anfühlen.
• Möchten Sie, dass es unendlich in eine Richtung scrollt und sich bei Bedarf wiederholt? Das erfordert das Klonen und Bewegen von Elementen im DOM. Oder vielleicht eine schlimme Fehlverwendung von <marquee>.

Damit belasse ich es. Mein Punkt ist nur, dass man viel tun kann, bevor man JavaScript braucht. Von dieser starken Basis aus zu beginnen, könnte ein guter Weg sein, der ein schönes Fallback bietet, unabhängig davon, was Sie darauf aufbauen.