Home → Contao →

Installation: Einbinden von json-Animation in den Slider

• Edit

René

28 Jan, 2022 02:55 PM

Produkt: Slider Pro Contao
Contao-Version: 4.12
Browser und Browserversionen: div.

Moin.
Ist es überhaupt möglich eine einfache json-Animation im Rocksolid-Slider einzubinden? Als reines html-Inhaltselement ausserhalb des Sliders hab ichs zum Laufen gebracht. Im Slider wird das genau identische Element allerdings einfach gar nicht dargestellt. Die Animation sollte ausserdem als Hintergrund zu Text funktionieren.
Herzlichen Dank für eine möglichst rasche Antwort.
Beste Grüsse
René

1. Support Staff 1 Posted by RockSolid Theme... on 31 Jan, 2022 07:55 AM

   

   Vielen Dank für Ihre Frage.

   Auf Ihrer Test-Seite konnten wir im HTML-Quelltext nur ein einziges <lottie-player>-Element finden, und zwar das ganz am Ende der Seite.

   Wie genau haben Sie das <lottie-player>-Element in den ersten Slide integriert? Als HTML-Inhaltselement oder über die HTML-Funktion des tinyMCE-Editors?

   • Edit

2. Support Staff 2 Posted by RockSolid Theme... on 31 Jan, 2022 08:19 AM

   

   Anscheinend entfernt das Animations-Skript das Element kurzzeitig bevor der Slider die Slides erstellen kann. Wenn Sie das JavaScript <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> an Ende der Website einbauen, sollte der Fehler nicht mehr auftreten.

   • Edit

3. 3 Posted by Hoch-3 GmbH | R... on 31 Jan, 2022 08:31 AM

   

   Hallo

   Jetzt erscheint es, allerdings erst nachdem erstmaligen Betätigen eines Navigationslinks innerhalt des Sliders…

   • Edit

4. 4 Posted by Hoch-3 GmbH | R... on 31 Jan, 2022 08:37 AM

   

   Ausserdem hab ich bemerkt, dass das slide mit dem animierten Bild nicht inactiv wird, wenn man weiter blätter…

   • Edit

5. Support Staff 5 Posted by RockSolid Theme... on 31 Jan, 2022 08:40 AM

   

   Stellen Sie bitte in den Moduleinstellungen des Sliders eine Höhe von 1518x865 ein. Damit wird verhindert, dass der Slider versucht die Größe der einzelnen Slides zu ermitteln.

   • Edit

6. 6 Posted by Hoch-3 GmbH | R... on 31 Jan, 2022 09:07 AM

   

   Muss ich dann für die responsive Ansicht mit Javascript dahinter?

   • Edit

7. Support Staff 7 Posted by RockSolid Theme... on 31 Jan, 2022 09:24 AM

   

   Stellen Sie im Feld „Breite“ bitte 100% und im Feld „Höhe“ den Wert 1518x865 ein. Dadurch wird der Slider immer responsive in einer Proportion von 1518 zu 865 dargestellt.

   • Edit