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 previous and next navigation. All animations are hardware accelerated for a smoother performance.
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.
<div uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="" alt="" uk-cover>
</li>
</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</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.
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 uk-slideshow="animation: fade">…</div>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-h3">Slide</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Fade</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Scale</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Pull</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: pull">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Push</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
</div>
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>
By default, infinite scrolling is enabled. To disable this behavior, just add the finite: true
option to the attribute.
<div uk-slideshow="finite: true">…</div>
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 uk-slideshow="ratio: 7:3">…</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
By default, the slideshow height adopts to the defined ratio. A minimum or maximum height can be set using the min-height
and max-height
options.
<div uk-slideshow="min-height: 300; max-height: 600">…</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Adding the uk-height-viewport
attribute from the Height component to the list of slideshow items will stretch the height to fill the whole viewport. You can set the min-height
option to define a minimum height.
<div uk-slideshow="ratio: false">
<ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">…</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">
<ul class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Note This example is set to 70% of the viewport height.
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.
<div uk-slideshow>
<ul class="uk-slideshow-items">…</ul>
<a href="#" uk-slideshow-item="previous">…</a>
<a href="#" uk-slideshow-item="next">…</a>
<ul>
<li uk-slideshow-item="0"><a href="#">…</a></li>
<li uk-slideshow-item="1"><a href="#">…</a></li>
<li 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 uk-slideshow>
<ul class="uk-slideshow-items">…</ul>
<ul class="uk-slideshow-nav uk-dotnav"></ul>
</div>
<div uk-slideshow="animation: push">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
Note For better visibility of overlaying navigations, add the .uk-light
or .uk-dark
class from the Inverse component.
The slideshow is not restricted to images. Other media, like videos, can be positioned in the background of each slide using the 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 uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<video src="" autoplay loop muted playsinline uk-cover></video>
</li>
<li>
<iframe src="" uk-cover></iframe>
</li>
</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
</li>
<li>
<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 uk-cover></iframe>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
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.
<div uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
<img src="" alt="" uk-cover>
</div>
</li>
</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
<img src="images/photo.jpg" alt="" uk-cover>
</div>
</li>
<li>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
<img src="images/dark.jpg" alt="" uk-cover>
</div>
</li>
<li>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
<img src="images/light.jpg" alt="" uk-cover>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Add content overlays using the Position component. It allows you to place the content anywhere inside the slide.
<div uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="" alt="" uk-cover>
<div class="uk-position-center uk-position-small">
<!-- The content goes here -->
</div>
</li>
</ul>
</div>
Note To adapt your content for better visibility on each image, add the .uk-light
or .uk-dark
class from the Inverse component or use the Overlay to add any style to the overlay box.
<div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center uk-light">
<h2 class="uk-margin-remove">Center</h2>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
<div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
<h3 class="uk-margin-remove">Overlay Bottom</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
<div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
<h3 class="uk-margin-remove">Overlay Bottom Right</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
<div class="uk-light">
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
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.
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 uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="" alt="" uk-cover>
<div class="uk-position-center uk-position-small">
<div uk-slideshow-parallax="x: 100,-100">
<!-- The content goes here -->
</div>
</div>
</li>
</ul>
</div>
In the example above, the content will start at 100
and animate half way 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 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 uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">…</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
<p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
<p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
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 uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="" alt="" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
</li>
</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/photo.jpg" alt="" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-position-center uk-position-medium uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
<p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</li>
<li>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/dark.jpg" alt="" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-position-center uk-position-medium uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
<p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</li>
<li>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/light.jpg" alt="" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-position-center uk-position-medium uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
<p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
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 uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="" alt="" uk-cover>
<div class="uk-position-bottom uk-position-small">
<div class="uk-transition-slide-bottom">
<!-- The content goes here -->
</div>
</div>
</li>
</ul>
</div>
Together with the Overlay component, content transitions are used to build a classic caption for the slideshow.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
<h3 class="uk-margin-remove">Left</h3>
<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
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. |
Learn more about JavaScript components.
UIkit.slideshow(element, options);
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 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 completed. |
The following methods are available for the component:
UIkit.slideshow(element).show(index);
Shows the slideshow item.
UIkit.slideshow(element).startAutoplay();
Starts the slideshow autoplay.
UIkit.slideshow(element).stopAutoplay();
Stops the slideshow autoplay.
The Slideshow component adheres to the Carousel WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
aria-roledescription
property set to carousel
. presentation
role and the aria-live
property.group
role if the slideshow has only a previous/next navigation or the tabpanel
role if it has a tab navigation, the aria-roledescription
property set to slide
and an aria-label
property.The tab navigation adheres to the tab pattern.
tablist
role. presentation
role. tab
role, the aria-selected
state, the aria-controls
property set to the ID of the respective slide, and an aria-label
property.The previous/next navigation adheres to the button pattern.
aria-label
property, the aria-controls
property set to the ID of the slide list, and if an <a>
element is used, the button
role.Autoplay stops when any element in the Slideshow component receives focus. The tab navigation can be accessed through keyboard using the following keys.
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. |