Verwendung: Slider für mehrere Ansichten verwenden

D.T. Mayáns's Avatar

D.T. Mayáns

10 Sep, 2020 12:57 PM

Produkt: Tao Contao
Contao-Version: 4.4.51
Browser und Browserversionen: aktuelle Browser / browserunabhängig / aktueller Firefox

Hallo und guten Tag,

ich habe folgende Problematik, mit der ich mich seit Tagen plage.

Im Ergebnis soll es so aussehen wie auf den Sreenshots ersichtlich:

In Mobil-Ansicht 4 Slides untereinander, im Tablet 2 x 2 Slides nebeneinander, auf Desktop in vollen Länge 4 Slides.

Es ist kein Problem, entweder alle nebeneinander anzuordnen (großer Bildschirm) oder alle untereinander (kleiner Bildschirm). Die Umschaltung zwischen neben- und untereinander überfordert mich. Und der Mix zwischen horizontal und vertikal in der mittleren Größe.

Ich hab es bislang versucht mit Ausblendungen (3 Slider, je nach Screensize wird entweder der Horizontal- oder der Vertikal-Slider eingeblendet), das sieht aber übel aus bei Veränderung der Fenstergröße. Außerdem hab ich mit der "display: flex"-Anweisung experimentiert, jedoch ohne sinnvolles Ergebnis.

Mein Plan war, anzufangen in der Mobil-Ansicht mit einem vertikalen Slider, und den dann bei größeren Größen mit CSS in die Horizontale zu zwingen. Alternativ habe ich versucht, einen horizontalen Slider mit CSS in die Vertikale zu zwingen. Beides erfolglos, ich hab trotz Untersuchung mit Firefox-Webmaster-Tools nicht herausgefunden, wie Rocksolid das gelöst hat

Aber vielleicht denke ich ja auch völlig falsch und es gibt elegantere Möglichkeiten zur Lösung.

Das wären meine Fragen:

  1. haben Sie eine rasche Idee, wie sich die Anforderung rasch mit Bordmitteln umsetzen lässt?

Oder alternativ:

  1. Welche CSS-Anweisungen sind für die Frage zuständig, ob der Slider horizontal oder vertikal angezeigt wird?

Wäre toll, wenn Sie mir helfen könnten.

(Die betroffene Seite ist noch Baustelle und hinter Passwortschutz. Bei Bedarf teile ich Ihnen gern die Zugangsdaten mit.)

  1. Support Staff 1 Posted by RockSolid Theme... on 10 Sep, 2020 03:30 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sollen sich die vier Element in einem Slider befinden? Also existieren mehr als vier Elemente, aber immer nur vier davon sollen sichtbar sein?

    Oder geht es lediglich darum die vier Text-Boxen abhängig von der Bildschirmbreite unterschiedlich anzuordnen? Ohne Interaktion durch Weiter/Zurück-Pfeile und dergleichen?

  2. 2 Posted by D.T. Mayáns on 10 Sep, 2020 05:06 PM

    D.T. Mayáns's Avatar

    Hallo, und vielen Dank für Ihre Antwort!

    > Sollen sich die vier Element in einem Slider befinden? Also existieren mehr als vier Elemente, aber immer nur vier davon sollen sichtbar sein?

    Genau, es existieren zum Beispiel 12 Elemente. Von denen jeweils 4 sichtbar sein sollen. Wobei die Mobil-Version möglichst vertikal scrollen soll. Und die Desktop-Version horizontal. Bei der Tablet-Version ist es relativ egal, schätze ich. Aber horizontal wäre nice.

    Ich kann zB auf horizontal stellen, maximal 4 Slides in maximal 4 Zeilen mit Mindestbreite der Slides. Dann klappt es mobil, es werden 4 Slides untereinander gezeigt, die horizontal sliden.

    Auf Tablet klappt das noch relativ gut, wenn man davon absieht, dass jetzt irgendwie die falschen Slides nebeneinander liegen. In Mobile ist noch korrekt ein Wechseln zwischen hellroten und dunkelroten Slides. Im Tablet liegen die beiden hellroten und dunkelroten nebeneinander. Das ist nicht gewollt, geht aber vielleicht nicht anders, soll aber an dieser Stelle nicht das Problem sein. (Da hat anscheinend der Designer geschummelt. Wenn man genau hinsieht auf den obigen Screenshots ist zB die Hamburg-Kachel mal hell- und mal dunkelrot).

    Außerdem sind jetzt 8 Slides auf dem Schirm statt nur 4.

    Ziehe ich das Fenster noch weiter auf, werden es erst 9 Slides in 3 Reihen, jetzt allerdings im richtigen Abwechslungsmuster. Und bei voller Breite 8 Slides in 2 Reihen. Die erste Reihe in hellrot und die zweite in dunkel.

    Ich könnte vertikal anfangen, hatte ich auch schon. Aber dann müsste ich ihn halt irgendwie in die Horizontale zwingen für die größeren Ansichten, sonst slided er eben vertikal. Ein verzwicktes Problem, an dem ich wie gesagt schon tagelang knabbere.

    > Oder geht es lediglich darum die vier Text-Boxen abhängig von der Bildschirmbreite unterschiedlich anzuordnen?

    Ohne Slider ist das relativ leicht, mit "display: flex", siehe anliegende zwei Beispiele. Da kann ich Anordnung und Reihenfolge festlegen, etwa dass der Text auch in der Mobilansicht immer unter dem Bild erscheint, auch wenn er non-mobil den Text mal links und mal rechts stehen hat.

    Es gelingt mir nur nicht, dieses Verhalten auch dem Slider aufzuzwingen.

    Sorry für die Mühe, die ich mache.

  3. 3 Posted by D.T. Mayáns on 10 Sep, 2020 06:58 PM

    D.T. Mayáns's Avatar

    Nur zur Vermeidung von Verwirrungen:

    Das sind natürlich Dummy-Slides jetzt. Wir wollen nicht zahlreiche Hamburg- und Shanghai-Slides anzeigen, später wird in jedem Slide eine andere Stadt erwähnt werden. Da aber eh nur 4 Slides gleichzeitig angezeigt werden sollen, sind es auch nur 4 Dummies.

  4. Support Staff 4 Posted by RockSolid Theme... on 11 Sep, 2020 11:42 AM

    RockSolid Themes's Avatar

    Wenn immer vier Slides gleichzeitig sichtbar sein sollen, könnten Sie die vier Elemente jeweils in einem Slide gruppieren sodass jeder Slide vier Elemente enthält deren Layout via display: flex gesteuert wird. Der Slider selbst ist dann nur noch dafür zuständig einzelne Slides weiterzuschalten.

  5. 5 Posted by D.T. Mayáns on 11 Sep, 2020 11:46 AM

    D.T. Mayáns's Avatar

    Das klingt nach einem vielversprechendem Ansatz. Werde ich ausprobieren und berichten. Aber vermutlich nicht mehr heute, aus terminlichen Gründen.

    Vielen Dank erstmal für die Hilfe!

  6. 6 Posted by D.T. Mayáns on 15 Sep, 2020 09:18 AM

    D.T. Mayáns's Avatar

    Vielen Dank nochmal für Ihre Hilfe!

    Ich bin noch nicht ganz da, wo ich hin will. Aber es wird.

    (Im Moment überlege ich, ob ich mir eine kleine Voodoo-Puppe mit dem Gesicht des Designers bastele. Aber das ist ein ganz anderes Thema.)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Screen-desktop.jpg 36.7 KB
  • Screen-mobile.jpg 40.4 KB
  • Screen-tablet.jpg 58.2 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac