To apply this component, add the uk-slideshow attribute to a container element and create a list of slides with the .uk-slideshow-items class.
Add an image in the background of each slide using the uk-cover attribute from the Cover component

Animations

By default, the slideshow uses a slide animation. You can set the animation option to use a different animation. Possible values are as follows:

Animation Description
slide Slides slide in side by side.
fade Slides fade in.
scale Slides are scaled up and fade out.
pull Slides are pulled from the deck.
push Slides are pushed to the deck.
Slide
Fade
Scale
Pull
Push

Autoplay

To activate autoplay, just add the autoplay: true option to the attribute. You can also set the interval in milliseconds between switching slides using autoplay-interval: 6000. To pause autoplay when hovering the slideshow, use pause-on-hover: true

<div uk-slideshow="autoplay: true">...</div>

To navigate through your slides, just use the uk-slideshow-item attribute. To target the slides, set the attribute of every nav item to the index number of the respective slideshow item. The elements with the uk-slideshow-item attribute need to be inside the uk-slideshow container. Setting the attribute to next and previous will switch to the adjacent slides.


    Note For better visibility of overlaying navigations, add the .uk-light or .uk-dark class from the Inverse component.

    Ken Burns effect

    To add a simple Ken Burns effect, wrap the image with a div and add the .uk-position-cover and .uk-animation-kenburns classes. You can also apply the .uk-animation-reverse or one of the .uk-transform-origin-* classes from the Utility component to modify the effect.

    Content parallax

    Add the uk-slideshow-parallax attribute to any element inside the slides to animate it together with the slideshow animation. Add an option with the desired animation values for each CSS property you want to animate. Define at least one start and end value. It can be done by passing two values separated by a comma.
    The parallax attribute can be used to add additional effects to the slideshow animations. In the following example the push animation is extended by dimming out and scaling down the image when it's sliding out.

    • Heading

      Lorem ipsum dolor sit amet.

    • Heading

      Lorem ipsum dolor sit amet.

    • Heading

      Lorem ipsum dolor sit amet.


    © 2019 Sasuke. All Rights Reserved.