tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/59627-verwendung-slider-fr-mehrere-ansichten-verwendenRockSolid Themes: Discussion 2020-09-16T06:31:12Ztag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-10T12:57:44Z2020-09-10T13:46:08ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Produkt: Tao Contao<br>
Contao-Version: 4.4.51<br>
Browser und Browserversionen: aktuelle Browser / browserunabhängig / aktueller Firefox</p>
<p>Hallo und guten Tag,</p>
<p>ich habe folgende Problematik, mit der ich mich seit Tagen plage.</p>
<p>Im Ergebnis soll es so aussehen wie auf den Sreenshots ersichtlich:</p>
<p>In Mobil-Ansicht 4 Slides untereinander, im Tablet 2 x 2 Slides nebeneinander, auf Desktop in vollen Länge 4 Slides.</p>
<p>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.</p>
<p>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.</p>
<p>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</p>
<p>Aber vielleicht denke ich ja auch völlig falsch und es gibt elegantere Möglichkeiten zur Lösung.</p>
<p>Das wären meine Fragen:</p>
<ol>
<li>haben Sie eine rasche Idee, wie sich die Anforderung rasch mit Bordmitteln umsetzen lässt?</li>
</ol>
<p>Oder alternativ:</p>
<ol>
<li>Welche CSS-Anweisungen sind für die Frage zuständig, ob der Slider horizontal oder vertikal angezeigt wird?</li>
</ol>
<p>Wäre toll, wenn Sie mir helfen könnten.</p>
<p>(Die betroffene Seite ist noch Baustelle und hinter Passwortschutz. Bei Bedarf teile ich Ihnen gern die Zugangsdaten mit.)</p></div>D.T. Mayánstag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-10T15:30:35Z2020-09-10T15:30:35ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Vielen Dank für Ihre Frage.</p>
<p>Sollen sich die vier Element in einem Slider befinden? Also existieren mehr als vier Elemente, aber immer nur vier davon sollen sichtbar sein?</p>
<p>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?</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-10T17:06:21Z2020-09-10T17:06:21ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Hallo, und vielen Dank für Ihre Antwort!</p>
<blockquote>
<p>Sollen sich die vier Element in einem Slider befinden? Also existieren mehr als vier Elemente, aber immer nur vier davon sollen sichtbar sein?</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>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).</p>
<p>Außerdem sind jetzt 8 Slides auf dem Schirm statt nur 4.</p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>Oder geht es lediglich darum die vier Text-Boxen abhängig von der Bildschirmbreite unterschiedlich anzuordnen?</p>
</blockquote>
<p>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.</p>
<p>Es gelingt mir nur nicht, dieses Verhalten auch dem Slider aufzuzwingen.</p>
<p>Sorry für die Mühe, die ich mache.</p></div>D.T. Mayánstag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-10T18:58:38Z2020-09-10T19:01:45ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Nur zur Vermeidung von Verwirrungen:</p>
<p>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.</p></div>D.T. Mayánstag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-11T11:42:25Z2020-09-11T11:42:25ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>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 <code>display: flex</code> gesteuert wird. Der Slider selbst ist dann nur noch dafür zuständig einzelne Slides weiterzuschalten.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-11T11:46:10Z2020-09-11T11:46:10ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Das klingt nach einem vielversprechendem Ansatz. Werde ich ausprobieren und berichten. Aber vermutlich nicht mehr heute, aus terminlichen Gründen.</p>
<p>Vielen Dank erstmal für die Hilfe!</p></div>D.T. Mayánstag:help.rocksolidthemes.com,2012-07-23:Comment/486181892020-09-15T09:18:19Z2020-09-15T09:18:19ZVerwendung: Slider für mehrere Ansichten verwenden<div><p>Vielen Dank nochmal für Ihre Hilfe!</p>
<p>Ich bin noch nicht ganz da, wo ich hin will. Aber es wird.</p>
<p>(Im Moment überlege ich, ob ich mir eine kleine Voodoo-Puppe mit dem Gesicht des Designers bastele. Aber das ist ein ganz anderes Thema.)</p></div>D.T. Mayáns