× Please select the right Template below! And please insert a live URL where we can see what do you mean. A screenshot is helpful too.

question-circle [SOLVED] Ken Burns animation not working in slideshow

  • Posts: 7

Ken Burns animation not working in slideshow was created by hpag-leader

Hello,
kenburns seemingly is working only while slides are in transition on my website (comeniusrealschule.de/crw/beta/). I'd like to have it animated like here: getuikit.com/v2/docs/slideshow.html.
What did i do wrong? Here's the code:
<div class="uk-slidenav-position" data-uk-slideshow>
<ul class="uk-slideshow uk-overlay uk-overlay-active" data-uk-slideshow="{autoplay:true,autoplayInterval:'5000',duration:'800',animation:fade,kenburns:true,kenburgsanimations:'uk-animation-middle-left'}">
<li><img class="uk-overlay-scale" src="images/slideshow/slide0.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Comenius Realschule Wertheim</h1>
<p>Unsere Schule - modern und gut ausgestattet (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide1.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Lernräume</h1>
<p>Gruppenarbeit im Klassenzimmer (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide2.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Willkommen</h1>
<p>Eingangsbereich als "Fischaugen"-Panorama (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide3.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Unsere Schule lebt!</h1>
<p>Verabschiedung des ehemaligen Rektors Hans-Peter Otterbach (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide4.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Feste und Aktionen</h1>
<p>Adventscafé 2019 (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide5.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Abendstimmung</h1>
<p>...an Fun-Court und Sporthalle (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide6.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Unsere Schule</h1>
<p>... von oben (Foto: © M. Giese)</p>
</div>
</div>
</li>
</ul>
<a class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="padding-left:25px;" data-uk-slideshow-item="previous"></a> 
<a class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="padding-right:25px;" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center" style="padding:10px;">
<li data-uk-slideshow-item="0"><a></a></li>
<li data-uk-slideshow-item="1"><a></a></li>
<li data-uk-slideshow-item="2"><a></a></li>
<li data-uk-slideshow-item="3"><a></a></li>
<li data-uk-slideshow-item="4"><a></a></li>
<li data-uk-slideshow-item="5"><a></a></li>
<li data-uk-slideshow-item="6"><a></a></li>
</ul>
</div>

Thanks in advance!
Christian
1 year 1 month ago #1

Please Log in or Create an account to join the conversation.

  • Posts: 8212

Replied by joomlaplates on topic Ken Burns animation not working in slideshow

Hallo,
öffnen sie die Datei
...\jp-school\layouts\theme.config.php
und fügen die slideshow-fx.js hinzu, siehe Bild

Attachment slideshow-fx.jpg not found

1 year 1 month ago #2
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 7

Replied by hpag-leader on topic Ken Burns animation not working in slideshow

Danke für die Hilfe - leider funktioniert es damit alleine wohl nicht :(
Ich möchte gerne etwas wie hier haben: getuikit.com/v2/docs/slideshow.html#ken-burns-effect

Was mache ich falsch?
<div class="uk-slidenav-position" data-uk-slideshow>
<ul class="uk-slideshow uk-overlay uk-overlay-active" data-uk-slideshow="{autoplay:true,autoplayInterval:'5000',duration:'800',animation:'fade',kenburns:true,kenburgsanimations:'uk-animation-middle-left'}">
<li><img class="uk-overlay-scale" src="images/slideshow/slide0.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Comenius Realschule Wertheim</h1>
<p>Unsere Schule - modern und gut ausgestattet (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide1.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Lernräume</h1>
<p>Gruppenarbeit im Klassenzimmer (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide2.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Willkommen</h1>
<p>Eingangsbereich als "Fischaugen"-Panorama (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide3.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Unsere Schule lebt!</h1>
<p>Verabschiedung des ehemaligen Rektors Hans-Peter Otterbach (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide4.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Feste und Aktionen</h1>
<p>Adventscafé 2019 (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide5.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Abendstimmung</h1>
<p>...an Fun-Court und Sporthalle (Foto: © M. Giese)</p>
</div>
</div>
</li>
<li><img class="uk-overlay-scale" src="images/slideshow/slide6.jpg" />
<div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade">
<div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;">
<h1>Unsere Schule</h1>
<p>... von oben (Foto: © M. Giese)</p>
</div>
</div>
</li>
</ul>
<a class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="padding-left:25px;" data-uk-slideshow-item="previous"></a> 
<a class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="padding-right:25px;" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center" style="padding:10px;">
<li data-uk-slideshow-item="0"><a></a></li>
<li data-uk-slideshow-item="1"><a></a></li>
<li data-uk-slideshow-item="2"><a></a></li>
<li data-uk-slideshow-item="3"><a></a></li>
<li data-uk-slideshow-item="4"><a></a></li>
<li data-uk-slideshow-item="5"><a></a></li>
<li data-uk-slideshow-item="6"><a></a></li>
</ul>
</div>
Last edit: 1 year 1 month ago by hpag-leader.
1 year 1 month ago #3

Please Log in or Create an account to join the conversation.

  • Posts: 8212

Replied by joomlaplates on topic Ken Burns animation not working in slideshow

Hallo, benutzen sie mal bitte den ganz einfachen Code:
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>
Danach können sie ihn erweitern mit autoplay ect pp
Last edit: 1 year 1 month ago by joomlaplates.
1 year 1 month ago #4

Please Log in or Create an account to join the conversation.

  • Posts: 7

Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow

Problem solved.
1 year 1 month ago #5

Please Log in or Create an account to join the conversation.

  • Posts: 7

Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow

Wunderbar! Beim dritten Versuch mit einfachem Code hat es nun funktioniert und war auch erweiterbar.
1 year 1 month ago #6

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Outstanding Support

24/7 Personal Email & Forum Support

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2022 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License