Mit swiper zwischen verschiedenen Seiten wechseln

[onkel-tobi]

Hi,

aktuell habe ich eine Seite auf der ich einige Widgets habe, allerdings würde ich das Tab auch gerne noch als digitalen Bilderrahmen verwenden.
Insofern stelle ich mir eine Slideshow vor, die folgendes zeigt:
- mein "normales" Tablet UI Interface
- eine Slideshow von Photos
- evtl. noch eine Spotify Seite

Die Frage ist nun, wie ich das am geschicktesten mache, lt. Beispiel code gilt ja folgendes:

Code Auswählen Erweitern

<div data-type="swiper">
<ul>
<li>
            <!-- Seite 1 -->
</li>

<li>
            <!-- Seite 2 -->
</li>

<li>
            <!-- Seite 3 -->
</li>
<ul>
</div>
Füge ich für bspw. Seite 1 nun den gesamten code meines standard UIs ein, die Seite einfach als iframe, oder was ist da das geschickteste?

Danke & Gruß,
Tobi

[Ulm32b]

Gehen tut vieles, alles ist Geschackssache.

Die Slideshow von Fotos ist eine klassische Swiper-Anwendung. Man könnte das als "Bildschirmschoner" und damit als Grundseite Deiner FTUI-Lösung sehen. Die anderen Seiten (genügend Ideen kommen mit der Zeit, keine Angst) werden dann vom Nutzer aufgerufen, wenn er Lust, Laune oder ein Informationsbedürfnis hat.

Dafür empfehle ich eine Pagebutton-Struktur. Die Hauptseite ist die Slideshow via Swiper, auf die (mit autoreturn) automatisch zurückgesprungen wird.

Dein Ansatz geht in die Richtung "Swiper in Swiper". Ob das geht, weiß ich nicht. Ich habe es nie ausprobiert, allein weil die Wischbewegung dann undefiniert wäre.

[Bastian0302]

Guten Abend,

ist aus der idee was geworden??
Ich versuche gerade etwas ähnliches und finde einfach keine lösung.

Code Auswählen Erweitern

<li data-row="5" data-col="4" data-sizex="10" data-sizey="11" class="">
       <div data-type="swiper" class="swiper" >
        <ul>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="10" data-sizey="8"  data-template="wetter_template.html" data-parameter='{"Device":"Wetter"}'class="">
                </li>
              <ul>
            </div>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="8" data-sizey="6">
                  <header>MPD Player</header>

                  </div>
                <li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
</li>

Code Auswählen Erweitern

div.swiper  {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff;
}

Siehe Bild:
Swiper wird auf voller größe des gridsters angezeigt -> durch css, dadurch auch der weiße rand als Kontrolle
Das Grister im <li> allerdings wird nicht in voller höhe angezeigt wie sonst.

An welcher Stelle muss ich also ansetzen um das gridster ,hier genauso darstellen zu lassen wie es normal wäre?