Use the data-uk-slideshow data attribute to show images with nice transitions. To make a slideshow fill the entire page, use the uk-slideshow-fullscreen class.
Show code
<div class="tm-slideshow-sandal uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'fade', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}">
<ul class="uk-slideshow uk-overlay-active">
<!-- slide 1 -->
<li>
<img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="demo">
<div class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-top">
<h3>This is a title</h3>
<div><p>Your caption goes here</p></div>
</div>
</li>
<!-- slide 2 -->
<li>
<img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="demo">
<div class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-top">
<h3>This is a title</h3>
<div><p>Your caption goes here</p></div>
</div>
</li>
</ul>
<!-- navigation buttons -->
<ul class="uk-dotnav uk-position-top uk-flex-right">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
</ul>
<!-- navigation arrows -->
<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
The following are the parameters required when using the uk-slideshow class:
| Parameters | Description |
|---|---|
style |
Defines the slideshow style. This parameter cannot be left blank. You can set the style as default or classic |
autoplay |
Set it to true to have the slideshow play automatically. Otherwise, set to false to stop the automatic play. |
animation |
Set the transition animation between slides |
transition_duration |
set the duration for the transition animation |
autoplay_interval |
Set the duration between switching slideshow items |
kenburns |
Set it to true or false to enable/disable kenburns effect to an image |
See the UIkit documentation on the available animations available for the slideshow component
Default Slideshow
markup
Show code
<div class="tm-slideshow-default uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scale', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}">
<ul class="uk-slideshow uk-overlay-active">
<li><img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="demo"></li>
<li><img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="demo"></li>
<li><img src="images/demo/default/slider/3.jpg" width="1200" height="500" alt="demo"></li>
</ul>
<div class="uk-margin">
<ul class="uk-dotnav uk-flex-center uk-hidden-touch">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
<li data-uk-slideshow-item="2"><a href=""></a></li>
</ul>
</div>
<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
Classic Slideshow
markup
Show code
<div class="tm-slideshow-sandal uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'random-fx', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}">
<ul class="uk-slideshow uk-overlay-active">
<!-- slide 1 -->
<li> <img src="images/demo/default/slider/1.jpg" width="1200" height="500" alt="image">
<div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left">
<div>
<h3>This is a title</h3>
<div class="uk-margin">
<p>This is a caption. </p>
</div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div>
</div>
</li>
<!-- slide 2 -->
<li> <img src="images/demo/default/slider/2.jpg" width="1200" height="500" alt="image">
<div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left">
<div>
<h3>Another title</h3>
<div class="uk-margin">
<p>This is a caption.</p>
</div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div>
</div>
</li>
<!-- slide 3 -->
<li> <img src="images/demo/default/slider/3.jpg" width="1200" height="500" alt="image">
<div class="uk-overlay-panel uk-flex uk-flex-middle uk-overlay-slide-left">
<div>
<h3>A simple title</h3>
<div class="uk-margin">
<p>This is a caption. </p>
</div> <a class="uk-button-default uk-button-large uk-button" href="#" target="_self">Learn more</a> </div>
</div>
</li>
</ul>
<!-- navigation buttons -->
<div class="uk-margin">
<ul class="uk-dotnav uk-flex-right uk-hidden-touch">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
<li data-uk-slideshow-item="2"><a href=""></a></li>
</ul>
</div>
<!-- navigation arrows -->
<div class="tm-slidenav uk-flex uk-flex-right uk-flex-middle">
<a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next"></a>
</div>
</div>
Testimonials in slideshow
-
CEO
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy. -
Chief Editor
Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition. -
Creative Designer
Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.
markup
Show code
<div class="tm-slideshow-default uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scroll', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: false}">
<ul class="uk-slideshow uk-overlay-active">
<!-- testimonial 1 -->
<li>
<blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i>
<p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-1-thumb.png" alt="Gary Long" width="64" height="64">Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p>
<span class="author uk-margin-top">Gary Long</span>
<span class="jobtitle">CEO</span> </blockquote>
</li>
<!-- testimonial 2 -->
<li>
<blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i>
<p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-2-thumb.png" alt="Lori Carroll" width="64" height="64">Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition.</p>
<span class="author uk-margin-top">Lori Carroll</span>
<span class="jobtitle">Chief Editor</span> </blockquote>
</li>
<!-- testimonial 3 -->
<li>
<blockquote class="tm-testimonial uk-clearfix uk-text-left"><i class="quote-icon uk-icon-7s-chat"></i>
<p><img class="tm-testimonial-avatar uk-align-left uk-margin-top" src="images/demo/avatar/client-3-thumb.png" alt="Paul Morgan" width="64" height="64">Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.</p>
<span class="author uk-margin-top">Paul Morgan</span>
<span class="jobtitle">Creative Designer</span> </blockquote>
</li>
</ul>
<!-- navigation bullets -->
<div class="uk-margin">
<ul class="uk-dotnav uk-flex-center uk-hidden-touch">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
<li data-uk-slideshow-item="2"><a href=""></a></li>
</ul>
</div>
<!-- navigation arrows -->
<div class="tm-slidenav uk-flex uk-flex-right uk-flex-middle">
<a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next"></a>
</div>
</div>
Slideshow Panel
Show code
<div class="tm-slideshow-panel-sandal" id="wk-1">
<div class="uk-panel uk-panel uk-padding-remove uk-overflow-hidden">
<div class="uk-grid uk-grid-collapse uk-flex-middle" data-uk-grid-margin="">
<div class="uk-width-medium-1-2 uk-text-center uk-row-first">
<div class="uk-slidenav-position" data-uk-slideshow="{animation: 'swipe'}">
<ul class="uk-slideshow">
<li><img alt="demo" height="420" src="images/demo/default/content/content-1.jpg" width="650"></li>
<li><img alt="demo" height="420" src="images/demo/default/content/content-2.jpg" width="650"></li>
</ul>
<a class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideshow-item="previous" href="#"></a>
<a class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideshow-item="next" href="#"></a>
<div class="uk-position-bottom uk-margin-large-bottom uk-margin-large-left uk-margin-large-right">
<ul class="uk-dotnav uk-dotnav-contrast uk-flex-center uk-margin-bottom-remove">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
</ul>
</div>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel-body uk-margin-left uk-text-left" data-uk-slideshow="">
<ul class="uk-slideshow">
<li>
<div class="uk-width-xlarge-9-10">
<h3 class="uk-module-title uk-h2 uk-margin-top-remove"><a class="uk-link-reset" href="#">Your title</a></h3>
<div class=" uk-margin-top">
your content here
</div>
<p class="uk-margin-bottom-remove">
<a class="uk-margin-top uk-button uk-button-primary" href="#">Read more <i class="uk-icon-chevron-right"></i></a>
</p>
</div>
</li>
<li>
<div class="uk-width-xlarge-9-10">
<h3 class="uk-module-title uk-h2 uk-margin-top-remove"><a class="uk-link-reset" href="#">Your title</a></h3>
<div class=" uk-margin-top">
Your content here
</div>
<p class="uk-margin-bottom-remove">
<a class="uk-margin-top uk-button uk-button-primary" href="#">Read more <i class="uk-icon-chevron-right"></i></a>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>