Slideshow

Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays.

Usage

To create a slideshow, just add the .uk-slideshow class to a <ul> element and place your images inside the list items. In order to load the necessary JavaScript, you also need to add the data-uk-slideshow attribute.

Example

Note To activate autoplay, just add the {autoplay:true} option to the data attribute.

Markup

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
    <li><img src="" width="" height="" alt=""></li>
</ul>

Navigations

To navigate through your slides, just use the data-uk-slideshow-item attribute. To target the slides, you need to set the data attribute of every nav item to the number of the respective slideshow item. The elements with the data-uk-slideshow-item attribute need to be inside the data-uk-slideshow container.

Markup

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li data-uk-slideshow-item="0"><a href="">...</a></li>
        <li data-uk-slideshow-item="1"><a href="">...</a></li>
    </ul>
</div>

Setting the attribute to next and previous will switch to the adjacent slides.

Markup

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" data-uk-slideshow-item="previous"></a>
    <a href="" data-uk-slideshow-item="next"></a>
</div>

Slidenav and Dotnav

The flexibility of the Slideshow component enables you to use any of the other UIkit components to navigate through items. For example the Slidenav and Dotnav can be used to style the slideshow navigations as you can see below.

Example

Markup

<div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
    </ul>
</div>

Transitions

The Slideshow component allows you to add different animations to items when switching between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

To apply these more advanced transitions, the slideshow-fx.js file needs to be included in the document head.

Example

• Scroll

  • 
  • 
  • 

• Scale

  • 
  • 
  • 

• Swipe

  • 
  • 
  • 

• Slice Down

  • 
  • 
  • 

• Slice Up

  • 
  • 
  • 

• Slice Up Down

  • 
  • 
  • 

• Fold

  • 
  • 
  • 

• Puzzle

  • 
  • 
  • 

• Boxes

  • 
  • 
  • 

• Boxes Reverse

  • 
  • 
  • 

Markup

<ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">...</ul>

Ken Burns effect

The Ken Burns effect can also be applied to slideshow items. Just add the {kenburns:true} option to the data attribute. This effect can also be applied to videos.

Example

Markup

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">...</ul>

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>

Fullscreen slideshow

To create a fullscreen slideshow that stretches to fill the entire viewport, just add the .uk-slideshow-fullscreen class.

Markup

<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>...</ul>

Overlays

You can also enhance slideshows with different overlays. Just add the .uk-overlay-panel to a <div> element inside the list item. Also add .uk-overlay-background and .uk-overlay-fade to show a background and a transition. To toggle the overlay once a slide becomes active add the .uk-overlay-active to the list container. For more options, check out the Overlay component.

Example

Markup

<ul class="uk-slideshow uk-overlay-active" data-uk-slideshow>
    <li>
        <img src="" width="" height="" alt="">
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">...</div>
    </li>
</ul>

Video

UIkit allows you to present both video elements and Iframes within a slideshow.

Example

Markup

<!-- This is a slideshow with a video element -->
<ul class="uk-slideshow">
    <li>
        <video width="" height="" autoplay loop muted controls>
            <source src="" type="">
        </video>
    </li>
</ul>

<!-- This is a slideshow with an Iframe -->
<ul class="uk-slideshow">
    <li>
        <iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

Content

You can basically insert any content, like text or an entire grid as slideshow items.

Example

Init element manually

var slideshow = UIkit.slideshow(element, { /* options */ });

JavaScript Options

Events