Mobilslider Horizontal was ist das?

[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