Ankündigung

Einklappen
Keine Ankündigung bisher.

Slider außerhalb des Grids

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Slider außerhalb des Grids

    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
    Zuletzt geändert von mapfei; 08.10.2021, 10:20.

  • #2
    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
    Zuletzt geändert von Tim; 08.10.2021, 09:38.
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      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...?

      Kommentar


      • #4
        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.
        Zuletzt geändert von Tim; 08.10.2021, 09:54.
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          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...
          Zuletzt geändert von mapfei; 08.10.2021, 10:56.

          Kommentar


          • #6
            Zitat von Tim Beitrag anzeigen
            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...

            Kommentar


            • #7
              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.
              http://www.premium-contao-themes.com

              Kommentar

              Lädt...
              X