Mobilslider Horizontal was ist das?

[Inflationwoman]

Hi, ich stehe gerade vor einer Funktion bei der ich mich frage mit welchem Script/Slider das wohl umgesetzt wird.

Vielen Dank

[Rolf B]

Hallo Inflationwoman,

nach fertigen Produkten kannst Du selbst suchen. Ich kenne keins. Vielleicht gibt's passende jQuery-Plugins oder andere JavaScript-Libraries. JavaScript steckt da auf jeden Fall hinter.

Wie genau diese Seite arbeitet, weiß ich nicht. Ich habe gerade mal bei Amazon geschaut: die haben ein festes Raster und wenn man die links/rechts Buttons klickt, werden andere Einträge in die Rasterzellen geladen. Dort wird also gar nicht gescrollt.

In deinem Beispiel dürfte es einen Scrollcontainer einer bestimmten Breite geben, worin die Empfehlungen eingetragen sind. Man kann es so machen, dass der Scrollcontainer eine Flexbox ist, mit overflow-x:scroll und fester Breite der Flex-Items z.B. (flex: 0 0 10em). Sodann braucht der Scrollcontainer auch selbst eine feste Breite, sonst deht er sich unkontrolliert aus.

Das sanfte Scrollen kann man mit scroll-behavior:smooth im Scrollcontainer erreichen, bei mir macht das allerdings keinen Unterschied zum Defaultwert "auto", mein Browser scrollt immer smooth.

Das Einrasten an bestimmten Positionen kann man mit erreichen, indem man dem Scrollcontainer "scroll-snap-type: x mandatory" gibt und den Scrollitems "scroll-snap-align: start".

Im Click-Hander der Buttons verwendet man dann die scrollTo-Methode des Containers, um beispielsweise um 75% der Containerbreite links oder rechts zu scrollen.

Rolf

[Inflationwoman]

Vielen Dank für die Analyse. So tief bin ich bei JS definitv nicht drin, das ich mir das zumuten würde.

Ich habe einen Slider auch bei Spiegel.de gefunden:

Dort gab es in den Code - Comments einen Hinweis auf https://swiperjs.com/demos

Für die einfache Anwendung mit "176kb" (siehe https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js ) viel zu viel...

[Gunnar Bittersmann]

@@Inflationwoman

ich stehe gerade vor einer Funktion bei der ich mich frage mit welchem Script/Slider das wohl umgesetzt wird.

Die bessere Frage wäre: womit du das umsetzen solltest. Da gibt’s gute und unbrauchbare Lösungen. Wobei man als Laie die Unbrauchbarkeit nicht auf den ersten Blick sieht, weil man solche Dinge wie Tastaturbedienbarkeit gar nicht auf dem Schirm hat. Nutzer, die darauf angewiesen sind, haben das aber.

Ich habe so ein Karussell mal selbst implementiert – als progressive enhancement zu nativem Scrollen: Scrollbar versteckt, Buttons hinzugefügt. Another kind of carousel. Die letzten drei dort verlinkten Codepens sollten den letzten Stand darstellen (wobei das Sich-im-Kreis-Drehen beim letzten noch nicht ganz rund läuft).

Das Ding tut seinen Dienst beim horizontalen Hauptmenü des Tagesspiegels im Header auf großen Viewports.

In der Wochenende-Bühne (die sollte morgen wieder auf der Startseite zu sehen sein, sieht dann so aus wie auf Slide 2) haben wir Swiper im Einsatz. Da hab ich auch nichts gefunden, was dagegen spräche. Die Entwickler haben – was Barrierefreiheit angeht – auch einiges richtig gemacht. (Ich bin da mal vorsichtig und sage nicht „alles richtig“.)

Kwakoni Yiquan

[Inflationwoman]

Vielen Dank für deine Antwort. Den Hinweis auf Swiper hätte ich vorher lesen sollen, dann hätte ich mir mein letztes Posting sparen können.

[Gunnar Bittersmann]

@@Inflationwoman

ich stehe gerade vor einer Funktion bei der ich mich frage mit welchem Script/Slider das wohl umgesetzt wird.

Vor allem anderen steht die Frage: Should I use a carousel?

Kwakoni Yiquan

[Inflationwoman]

Ich kann jetzt nicht für jeden Nutzer sprechen. Aber wenn mein 70 Jähriger Vater den Slider auf Spiegel.de versteht, unterstelle ich ohne weitere Prüfung, das die Generation den Slider nun verstanden hat.

Eine Trafficanalyse wäre später natürlich wichtig um ggf. das auch zu Wiederlegen.

[encoder]

Ich glaube es ging nicht ums verstehen, sondern um die Wirkung. Es gibt Dinge die man leicht versteht und trotzdem sind sie lästig und haben nicht den erwünschten Effekt 😉

[Der Martin]

Hallo,

Ich glaube es ging nicht ums verstehen, sondern um die Wirkung. Es gibt Dinge die man leicht versteht und trotzdem sind sie lästig und haben nicht den erwünschten Effekt 😉

ich glaube, es ging nicht ums Verstehen, sondern um Zugänglichkeit.
Dass "nette Effekte" manchmal als lästig empfunden werden, ist ein anderer Punkt.

Ein schönes Wochenende noch
 Martin

[Rolf B]

Hallo Gunnar,

hier stellt sich auch die Frage: Was hat das verlinkte Horrorkarussell mit der Frage von Inflationwoman zu tun?

• Es zeigt immer nur einen Eintrag
• Es schaltet automatisch weiter und lässt sich nicht pausieren
• Die Umschaltzeit ist zu kurz um die längeren Texte zu lesen

Ob man das, was angefragt wurde, ebenfalls Karussell nennt, weiß ich nicht. Die "Auch interessant" Anzeigen dieser Art, mit denen ich zu tun hatte,

• zeigen mehrere Einträge
• schalten nicht automatisch weiter

Das Wochenend-Swiper-Karussel vom Tagesspiegel finde ich buggy.

• tabbt man vom vorigen Artikel (heute: lasst euch umarmen) weiter, ist man erstmal im Fokusnichts (zumindest sehe ich auf diesem Tablet hier keinen Fokusrahmen mehr), einmal weitertabben führt auf die Karte über Beziehungsratgeber
• Mein Tablet zeigt ca 3,1 Karten. Die Karte über Buchenwald ist nur zu 1/10 zu sehen. Tabbe ich dorthin, scrollt sie nicht in den sichtbaren Bereich
• dem Kartenkarussell fehlt Padding, man sieht den Outline-Rahmen am oberen Rand nicht und bei der ersten Karte auch den linken Rahmen nicht

Inwieweit dafür Swiper oder der Swiper-Integrator verantwortlich ist, weiß ich natürlich nicht.

Warum Swiper so riesig ist und was er alles leistet, weiß ich nicht. Ich hatte gestern abend ein bisschen rumgespielt und EIGENTLICH ist ein solches Swipe-Widget, entsprechend meiner Konzeptbeschreibung oben, mit ein paar Zeilen CSS und JS gebaut. Die Tastatursteuerung von Swiper, wie beim Tagesspiegel, ergibt sich automatisch wenn die Karten Links sind. Ob Swiper noch speziellen Code für kleine Viewports enthält, muss ich noch gucken.

Ich denke, ich erzeuge das mal als Beispiel und dann kannst Du mir sagen, was alles fehlt 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das Wochenend-Swiper-Karussel vom Tagesspiegel finde ich buggy.

Hab ich gleich mal als Bugticket eingetütet.

• tabbt man vom vorigen Artikel (heute: lasst euch umarmen) weiter, ist man erstmal im Fokusnichts (zumindest sehe ich auf diesem Tablet hier keinen Fokusrahmen mehr), einmal weitertabben führt auf die Karte über Beziehungsratgeber

Hm, als Tastaturnutzer würde ich bei verlorenem Fokus nochmal Tab drücken und erleichtert sein, den Fokus wiederzuhaben. Weiß nicht, ob das so kritisch ist oder nur’n Schönheitsfehler.

• Mein Tablet zeigt ca 3,1 Karten. Die Karte über Buchenwald ist nur zu 1/10 zu sehen. Tabbe ich dorthin, scrollt sie nicht in den sichtbaren Bereich

Das ist blöd. Mal sehen, ob man da was mit focus-Event und scrollIntoView() machen kann oder ob Swiper gar nicht Scrollen verwendet (so wie es mein Karussell tut).

• dem Kartenkarussell fehlt Padding, man sieht den Outline-Rahmen am oberen Rand nicht und bei der ersten Karte auch den linken Rahmen nicht

Schönheitsfehler; sollte aber leicht zu beheben sein.

Kwakoni Yiquan