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-gaucho 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="1400" height="1024" 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="1400" height="1024" 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="1400" height="1024" alt="demo"></li>
    <li><img src="images/demo/default/slider/2.jpg" width="1400" height="1024" alt="demo"></li>
    <li><img src="images/demo/default/slider/3.jpg" width="1400" height="1024" 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

This is a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more
Another title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more
A simple title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

markup

Show code

<div class="tm-slideshow-gaucho uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scale', pauseOnHover: true, duration: 500, autoplayInterval: 10000, kenburns: true}">
  <ul class="uk-slideshow uk-overlay-active">

    <!-- slide 1 -->
    <li> <img src="images/demo/default/slider/1.jpg" width="1400" height="1024" 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="1400" height="1024" 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="1400" height="1024" 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

Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
Gary Long CEO
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.
Lori Carroll Chief Editor
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.
Paul Morgan Creative Designer

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-center"><i class="quote-icon uk-icon-7s-chat"></i>
        <p><img class="tm-testimonial-avatar uk-align-center uk-margin-top uk-border-circle" 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-center"><i class="quote-icon uk-icon-7s-chat"></i>
        <p><img class="tm-testimonial-avatar uk-align-center uk-margin-top uk-border-circle" 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-center"><i class="quote-icon uk-icon-7s-chat"></i>
        <p><img class="tm-testimonial-avatar uk-align-center uk-margin-top uk-border-circle" 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>

Elements

If you can dream it, you can do it

Show code

Default Slideshow

Show code

Classic Slideshow

This is a title

Another title

A simple title

Show code

Testimonials in slideshow

Show code