Slider außerhalb des Grids

[mapfei]

Hi zusammen,

ich möchte einen Slider gerne so platzieren, dass dieser links im Grid startet, jedoch bei Start sowohl links und rechts auf 100vw geht, also volle Browserbreite

Irgendeinen Denkanstoß?

Grüße,
mapfei

[Tim]

Ok, wir sehen quasi die Ausgangsposition und wenn nach rechts gescrollt wird, würde er die links Linie passieren. Korrekt?

Ich sehe zwei Wege:
1. Der Linke weisse Bereich müsste direkt Content des Sliders sein. Dann wird dieser Bereich sogar mit animiert und schiebt sich quasi selbstständig aus dem Sichtfeld.
2. Der Linke Bereich maskiert den Slider. Hier wird die Schwierigkeit entstehen den gewünschten Sichtbaren Inhalt an die Ausgangsposition zu setzen und bei Nutzung des Sliders die Maske zu entfernen. Ohne JS und CSS Gefrickel wird's schwierig.

Weg 1 klingt eigentlich gut machbar. Pack nen Psydo-Inhalt rein und füll den weiss

[mapfei]

Genau, das wäre die Ausgangsposition.

Aber die Breite des Pseudo-Contents ist ja variabel, so dass es ins Grid von 1160px passt.

Reden wir hier vom RS oder SwiperSlider, ContentSlider...?

[Tim]

Es geht ja um einen Denkanstoß. Ich würde es mit einem weissen Content-Block versuchen, den man ja immer noch mit CSS gezielt stylen kann (Weite, Mobil ausgeblendet usw.)

Ausgehend vom Screenshot, (ich nehme stark an das ist von einer fremdseite im Netz abfotografiert) ist der Inhalt eher eine Timeline, kein Slider.

Ausgehend von einem Slider würde ich den normalen Swiper oder Content-Slider nehmen oder ganz ohne Slider aufbauen und die Grundidee der horizontal-Scroll Layouts nutzen.
-> Du kannst quasi auch einen Content-Block machen *, der horizontal scrollbar ist. So wie das Standard-Styling der Tabellen in EX.

* Alle Inhalte eines Artikelns inline setzen, ne max-width rein und ne scrollbar.

[mapfei]

Also ich gebe dem Artikel ein overflow-x:auto mit und die darin enthaltenen Bilder stelle ich auf display: inline? Die Bilder werden dann jedoch immer noch untereinander in der Größe angepasst dargestellt...

Größe stimmt nun, allerdings das inline bzw. float will nicht so recht... floaten quasi nicht...

Habe es jetzt mit padding-left und nur einem Image gelöst...

[mapfei]

Ausgehend von einem Slider würde ich den normalen Swiper oder Content-Slider nehmen oder ganz ohne Slider aufbauen und die Grundidee der horizontal-Scroll Layouts nutzen.
-> Du kannst quasi auch einen Content-Block machen *, der horizontal scrollbar ist. So wie das Standard-Styling der Tabellen in EX.

* Alle Inhalte eines Artikelns inline setzen, ne max-width rein und ne scrollbar.

Muss das nochmal aufgreifen. Das Problem hierbei ist, dass ich zwar den Bereich scrollen kann, aber auch nur deshalb, weil ich ne AppleMouse besitze, welche horizontal scrollen kann. Man könnte jetzt zwar die Scrollbar mit ::-webkit-scrollbar-track, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb usw. sichtbar machen, aber im Firefox bleibt sie dann trotzdem unsichtbar.

Schön wäre ein Touch-Verhalten, so wie es mobil auch funktioniert, indem man den Content / das DIV mit der Maus nach links/rechts zieht...

[Tim]

Der Swiper-Slider, der auch in EX zum Einsatz kommt, kann sich so verhalten. Siehe: https://swiperjs.com/
ggf. die Einstellungen in den jeweiligen Inhaltselemente-Templates anpassen.