Slideshow
Create a responsive slideshow with images and videos.
The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, the animation literally sticks at your fingertips or mouse cursor. It accelerates to keep up with your pace when you click through the previous and next navigation. All animations are hardware accelerated for a smoother performance.
Usage
To apply this component, add the data-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 data-uk-cover
attribute from the Cover component.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <img src="" alt="" data-uk-cover /> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Note To lazy load images in the
slides, use the loading="lazy"
attribute. The Slideshow will automatically
remove the attribute from images in adjacent slides.
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. |
<div data-uk-slideshow="animation: fade"> <!-- ... --></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"><div><div class="uk-h3 mb-4">Slide</div><divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div><div><div class="uk-h3 mb-4">Fade</div><divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: fade"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div><div><div class="uk-h3 my-4">Scale</div><divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: scale"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div><div><div class="uk-h3 my-4">Pull</div><divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: pull"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div><div><div class="uk-h3 my-4">Push</div><divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousuk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"><div><div className="uk-h3 mb-4">Slide</div><div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div><div><div className="uk-h3 mb-4">Fade</div><div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: fade"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div><div><div className="uk-h3 my-4">Scale</div><div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: scale"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div><div><div className="uk-h3 my-4">Pull</div><div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: pull"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div><div><div className="uk-h3 my-4">Push</div><div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div></div>
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 data-uk-slideshow="autoplay: true"> <!-- ... --></div>
Infinite Scrolling
By default, infinite scrolling is enabled. To disable this behavior, just add the finite: true
option to the attribute.
<div data-uk-slideshow="finite: true"> <!-- ... --></div>
Ratio
The slideshow always takes up the full width of its parent container. The height adapts according to the defined ratio. To change the default ratio of 16:9, just add the ratio
option to the attribute. It’s recommended to use the same ratio as the background images. For example, just use their width and height, like 1600:1200
.
<div data-uk-slideshow="ratio: 7:3"> <!-- ... --></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="ratio: 7:3; animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="ratio: 7:3; animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Min/Max height
By default, the slideshow height adopts the defined ratio. A minimum or maximum height can be set using the min-height
and max-height
options.
<div data-uk-slideshow="min-height: 300; max-height: 600"> <!-- ... --></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="min-height: 300; max-height: 600; animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="min-height: 300; max-height: 600; animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Navigation
To navigate through your slides, just use the data-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 data-uk-slideshow-item
attribute need to be inside the data-uk-slideshow
container. Setting the attribute to next
and previous
will switch to the adjacent slides.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <!-- ... --> </div>
<a href data-uk-slideshow-item="previous"> <!-- ... --> </a> <a href data-uk-slideshow-item="next"> <!-- ... --> </a>
<ul> <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>
The flexibility of the Slideshow component allows you to use any of the other UIkit components to navigate through items. For example the Slidenav, Dotnav and Thumbnav components can be used to style the slideshow navigations.
If there is no item specific content in the navigation items, you can also add the .uk-slideshow-nav
class instead of adding navigation items manually. It will generate its items automatically using <li><a href></a></li>
as markup. This is a useful shortcut when using the Dotnav.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <!-- ... --> </div>
<ul class="uk-slideshow-nav uk-dotnav"></ul></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<div data-uk-slideshow="animation: push"><div class="uk-visible-toggle uk-position-relative" tabindex="-1"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div><ul class="uk-slideshow-nav uk-dotnav mt-4 justify-center"></ul></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div data-uk-slideshow="animation: push"><div className="uk-visible-toggle uk-position-relative" tabIndex={-1}><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div><ul className="uk-slideshow-nav uk-dotnav mt-4 justify-center" /></div>
Parallax animation
Instead of a step-by-step animation using navigation controls, the slideshow can use a stepless parallax animation based on its scroll position in the viewport. Just add parallax: true
to the attribute. If a navigation is set in the markup it won’t be clickable but it will get the active state of the current slide.
<div data-uk-slideshow="parallax: true"> <!-- ... --></div>
-
-
Something's not working? Feel free to report an issue or edit this snippet .
<div uk-slideshow="animation: push; parallax: true;"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><ul class="uk-slideshow-nav uk-dotnav mt-4 justify-center"></ul></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div uk-slideshow="animation: push; parallax: true;"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><ul className="uk-slideshow-nav uk-dotnav mt-4 justify-center" /></div>
To adjust the parallax duration, set the parallax-start
and parallax-end
options. The parallax-start
option defines when the animation starts. The default value of 0
means that the slideshow’s top border and viewport’s bottom border intersect. The end
option defines when the animation ends. The default value of 0
means that the slideshow’s bottom border and the viewport’s top border intersect. Values can be set in any dimension units, namely vh
, %
and px
. The %
unit relates to the slideshow’s height. Both options allow basic mathematics operands, +
and -
.
<div data-uk-slideshow="parallax: true; parallax-start: 100%; parallax-end: 100%;"> <!-- ... --></div>
-
-
Something's not working? Feel free to report an issue or edit this snippet .
<divdata-uk-slideshow="animation: push; parallax: true; parallax-start: 100%; parallax-end: 100%;"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /></div><div><img src="/images/light.jpg" alt="" data-uk-cover /></div></div><ul class="uk-slideshow-nav uk-dotnav mt-4 justify-center"></ul></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div data-uk-slideshow="animation: push; parallax: true; parallax-start: 100%; parallax-end: 100%;"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><img src="/images/dark.jpg" alt data-uk-cover /></div><div><img src="/images/light.jpg" alt data-uk-cover /></div></div><ul className="uk-slideshow-nav uk-dotnav mt-4 justify-center" /></div>
Videos
The slideshow is not restricted to images. Other media, like videos, can be positioned in the background of each slide using the data-uk-cover
attribute from the Cover component. Videos are muted, and play automatically. The video will pause whenever it’s not visible, and resume once it becomes visible again.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <video src="" autoplay loop muted playsinline uk-cover></video> </div> <div> <iframe src="" data-uk-cover></iframe> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /></div><div><videosrc="https://yootheme.com/site/images/media/yootheme-pro.mp4"loopmutedplaysinlinedata-uk-cover></video></div><div><iframesrc="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&wmode=transparent&playsinline=1"width="1920"height="1080"allowfullscreendata-uk-cover></iframe></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /></div><div><video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" loop muted playsInline data-uk-cover /></div><div><iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&wmode=transparent&playsinline=1" width={1920} height={1080} allowFullScreen data-uk-cover /></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Ken Burns effect
To add a simple Ken Burns effect, wrap the image with a div
and add the .uk-position-cover
and .uk-anmt-kenburns
classes. You can also apply the .uk-anmt-reverse
or one of the .uk-transform-origin-*
classes from the Utility component to modify the effect.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <div class="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-center-left" > <img src="" alt="" data-uk-cover /> </div> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><divclass="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-center-left"><img src="/images/photo.jpg" alt="" data-uk-cover /></div></div><div><divclass="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-top-right"><img src="/images/dark.jpg" alt="" data-uk-cover /></div></div><div><divclass="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-bottom-left"><img src="/images/light.jpg" alt="" data-uk-cover /></div></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><div className="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-center-left"><img src="/images/photo.jpg" alt data-uk-cover /></div></div><div><div className="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-top-right"><img src="/images/dark.jpg" alt data-uk-cover /></div></div><div><div className="uk-anmt-kenburns uk-anmt-reverse uk-position-cover uk-transform-origin-bottom-left"><img src="/images/light.jpg" alt data-uk-cover /></div></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Content overlays
Add content overlays using the Position component. It allows you to place the content anywhere inside the slide.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <img src="" alt="" data-uk-cover /> <div class="uk-position-center uk-position-sm"> <!-- The content goes here --> </div> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /><div class="uk-position-center uk-position-sm text-center text-white"><h3 class="uk-h3">Center</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /><divclass="uk-position-bottom uk-position-md py-4 text-center text-white"><h3 class="uk-h3">Bottom</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/light.jpg" alt="" data-uk-cover /><div class="uk-position-bottom bg-black/80 py-4 text-center text-white"><h3 class="uk-h3">Overlay Bottom</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /><div class="uk-position-bottom-right uk-position-sm bg-white/80 p-4"><h3 class="uk-h3">Overlay Bottom Right</h3><p class="mt-4">Lorem ipsum dolor sit amet.</p></div></div></div><div class="uk-light"><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /><div className="uk-position-center uk-position-sm text-center text-white"><h3 className="uk-h3">Center</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt data-uk-cover /><div className="uk-position-bottom uk-position-md py-4 text-center text-white"><h3 className="uk-h3">Bottom</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/light.jpg" alt data-uk-cover /><div className="uk-position-bottom bg-black/80 py-4 text-center text-white"><h3 className="uk-h3">Overlay Bottom</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt data-uk-cover /><div className="uk-position-bottom-right uk-position-sm bg-white/80 p-4"><h3 className="uk-h3">Overlay Bottom Right</h3><p className="mt-4">Lorem ipsum dolor sit amet.</p></div></div></div><div className="uk-light"><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div></div>
Content parallax
Add the data-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.
This functionality is inherited from the Parallax component, and it allows animating CSS properties depending on the scroll position of the slideshow animation. Take a look at the possible properties that can be animated.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <img src="" alt="" data-uk-cover /> <div class="uk-position-center uk-position-sm"> <div data-uk-slideshow-parallax="x: 100,-100"> <!-- The content goes here --> </div> </div> </div> </div></div>
In the example above, the content will start at 100
and animate halfway to 0
while the slide moves in. When the slide starts again to move out, the content will continue to animate to -100
. This works because the start and end values have the same distance. For different distances, three values are needed: Start (Slide animates in), Middle (Slide is centered), End (Slide animates out).
<div data-uk-slideshow-parallax="x: 300,0,-100"> <!-- ... --></div>
The next example defines different in and out animations. The content slides in by moving from 100
to 0
and fades out from 1
to 0
.
<div data-uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0"> <!-- ... --></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /><div class="uk-position-center uk-position-sm text-center text-white"><h3 class="uk-h3" data-uk-slideshow-parallax="x: 100,-100">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p></div></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /><div class="uk-position-center uk-position-sm text-center text-white"><h3 class="uk-h3" data-uk-slideshow-parallax="x: 100,-100">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p></div></div><div><img src="/images/light.jpg" alt="" data-uk-cover /><div class="uk-position-center uk-position-sm text-center text-white"><h3class="uk-h3"data-uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p></div></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /><div className="uk-position-center uk-position-sm text-center text-white"><h3 className="uk-h3" data-uk-slideshow-parallax="x: 100,-100">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p></div></div><div><img src="/images/dark.jpg" alt data-uk-cover /><div className="uk-position-center uk-position-sm text-center text-white"><h3 className="uk-h3" data-uk-slideshow-parallax="x: 100,-100">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p></div></div><div><img src="/images/light.jpg" alt data-uk-cover /><div className="uk-position-center uk-position-sm text-center text-white"><h3 className="uk-h3" data-uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p></div></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Advanced effects
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.
<div data-uk-slideshow="animation: push"> <div class="uk-slideshow-items"> <div> <div class="uk-position-cover" data-uk-slideshow-parallax="scale: 1.2,1.2,1" > <img src="" alt="" data-uk-cover /> </div> <div class="uk-position-cover" data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000" ></div> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: push"><div class="uk-slideshow-items"><div><divclass="uk-position-cover"data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/photo.jpg" alt="" data-uk-cover /></div><divclass="uk-position-cover"data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div><div class="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 class="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div><div><divclass="uk-position-cover"data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/dark.jpg" alt="" data-uk-cover /></div><divclass="uk-position-cover"data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div><div class="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 class="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div><div><divclass="uk-position-cover"data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/light.jpg" alt="" data-uk-cover /></div><divclass="uk-position-cover"data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div><div class="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 class="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p class="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: push"><div className="uk-slideshow-items"><div><div className="uk-position-cover" data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/photo.jpg" alt data-uk-cover /></div><div className="uk-position-cover" data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000" /><div className="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 className="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div><div><div className="uk-position-cover" data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/dark.jpg" alt data-uk-cover /></div><div className="uk-position-cover" data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000" /><div className="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 className="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div><div><div className="uk-position-cover" data-uk-slideshow-parallax="scale: 1.2,1.2,1"><img src="/images/light.jpg" alt data-uk-cover /></div><div className="uk-position-cover" data-uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000" /><div className="uk-position-center uk-position-md text-center text-white"><div uk-slideshow-parallax="scale: 1,1,0.8"><h3 className="uk-h3" data-uk-slideshow-parallax="x: 200,0,0">Heading</h3><p className="mt-4" data-uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p></div></div></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Content transitions
Transition classes from the Transition component are triggered automatically inside slides. Contrary to the parallax effect, transitions are not attached to the slideshow animation and start playing independently after the slideshow animation.
<div data-uk-slideshow> <div class="uk-slideshow-items"> <div> <img src="" alt="" data-uk-cover /> <div class="uk-position-bottom uk-position-sm"> <div class="uk-transition-slide-bottom"> <!-- The content goes here --> </div> </div> </div> </div></div>
-
Something's not working? Feel free to report an issue or edit this snippet .
<divclass="uk-visible-toggle uk-position-relative"tabindex="-1"data-uk-slideshow="animation: fade"><div class="uk-slideshow-items"><div><img src="/images/photo.jpg" alt="" data-uk-cover /><divclass="uk-position-bottom uk-transition-slide-bottom bg-black/80 py-4 text-center text-white"><h3 class="uk-h3">Bottom</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt="" data-uk-cover /><divclass="uk-position-bottom uk-transition-slide-bottom bg-black/80 py-4 text-center text-white"><h3 class="uk-h3">Bottom</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/light.jpg" alt="" data-uk-cover /><divclass="uk-position-right uk-transition-slide-right w-80 bg-black/80 p-4 text-center text-white"><h3 class="uk-h3">Left</h3><p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div><aclass="uk-hidden-hover uk-position-center-left uk-position-sm"hrefdata-uk-slidenav-previousdata-uk-slideshow-item="previous"></a><aclass="uk-hidden-hover uk-position-center-right uk-position-sm"hrefdata-uk-slidenav-nextdata-uk-slideshow-item="next"></a></div> -
Something's not working? Feel free to report an issue or edit this snippet .
<div className="uk-visible-toggle uk-position-relative" tabIndex={-1} data-uk-slideshow="animation: fade"><div className="uk-slideshow-items"><div><img src="/images/photo.jpg" alt data-uk-cover /><div className="uk-position-bottom uk-transition-slide-bottom bg-black/80 py-4 text-center text-white"><h3 className="uk-h3">Bottom</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/dark.jpg" alt data-uk-cover /><div className="uk-position-bottom uk-transition-slide-bottom bg-black/80 py-4 text-center text-white"><h3 className="uk-h3">Bottom</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div><img src="/images/light.jpg" alt data-uk-cover /><div className="uk-position-right uk-transition-slide-right w-80 bg-black/80 p-4 text-center text-white"><h3 className="uk-h3">Left</h3><p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div><a className="uk-hidden-hover uk-position-center-left uk-position-sm" href data-uk-slidenav-previous data-uk-slideshow-item="previous" /><a className="uk-hidden-hover uk-position-center-right uk-position-sm" href data-uk-slidenav-next data-uk-slideshow-item="next" /></div>
Component options
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
Slideshow
Option | Value | Default | Description |
---|---|---|---|
animation | String | slide | Slideshow animation mode (slide , fade , scale , pull or push ). |
autoplay | Boolean | false | Slideshow autoplays. |
autoplay-interval | Number | 7000 | The delay between switching slides in autoplay mode. |
draggable | Boolean | true | Enable pointer dragging. |
easing | String | ease | The animation easing (CSS timing functions or cubic-bezier). |
finite | Boolean | false | Disable infinite sliding. |
pause-on-hover | Boolean | true | Pause autoplay mode on hover. |
index | Number | 0 | Slideshow item to show. 0 based index. |
velocity | Number | 1 | The animation velocity (pixel/ms). |
ratio | Boolean, String | 16:9 | The ratio. (false prevents height adjustment) |
min-height | Boolean, Number | false | The minimum height. |
max-height | Boolean, Number | false | The maximum height. |
JavaScript
Learn more about JavaScript components.
Initialization
UIkit.slideshow(element, options);
Events
The following events will be triggered on elements with this component attached:
Name | Description |
---|---|
beforeitemshow | Fires before an item is shown. |
itemshow | Fires after an item is shown. |
itemshown | Fires after an item’s show animation has been completed. |
beforeitemhide | Fires before an item is hidden. |
itemhide | Fires after an item’s hide animation has started. |
itemhidden | Fires after an item’s hide animation has been completed. |
Methods
The following methods are available for the component:
Show
UIkit.slideshow(element).show(index);
Shows the slideshow item.
startAutoplay
UIkit.slideshow(element).startAutoplay();
Starts the slideshow autoplay.
stopAutoplay
UIkit.slideshow(element).stopAutoplay();
Stops the slideshow autoplay.
Accessibility
The Slideshow component adheres to the Carousel WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
- The slideshow has the
aria-roledescription
property set tocarousel
. - The slide list has an ID and the
aria-live
property. - The slides have an ID, the
group
role if the slideshow has only a previous/next navigation or thetabpanel
role if it has a tab navigation, thearia-roledescription
property set toslide
and anaria-label
property.
The tab navigation adheres to the tab pattern.
- The tab navigation has the
tablist
role. - The tab navigation items have the
presentation
role. - The tab navigation links have the
tab
role, thearia-selected
state, thearia-controls
property set to the ID of the respective slide, and anaria-label
property.
The previous/next navigation adheres to the button pattern.
- The prev/next navigation items have an
aria-label
property, thearia-controls
property set to the ID of the slide list, and if an<a>
element is used, thebutton
role.
Keyboard interaction
Autoplay stops when any element in the Slideshow component receives focus. The tab navigation can be accessed through the keyboard using the following keys.
- The tab or shift+tab keys place focus on the active tab in the tab navigation. If the focus already is on the active tab, the focus will move to the next element outside the tab navigation.
- The left/right arrow or up/down arrow keys, depending on the orientation, navigate through the tabs. The corresponding slide will get active automatically. If the focus is on the last tab, it moves to the first tab.
- The home or end keys move the focus to the first or last tab.
Internationalization
The Slideshow component uses the following translation strings. Learn more about translating components.
Key | Default | Description |
---|---|---|
next | Next Slide | aria-label for next slide button. |
previous | Previous Slide | aria-label for previous slide button. |
slideX | Slide %s | aria-label for pagination slide button. |
slideLabel | %s of %s | aria-label for slide. |