# Slider The Slider component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. It even 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-z-slider` attribute to a container element and create a list of slides with the `.z-slider-items` class. Add an image or any other content to each item. To define the widths of the slider items, you can use the width utility classes. If no specific width is set, each item's width depends on the dimensions of the content itself. ```html

``` ```html

``` Note To lazy load images in the slides, use the `loading="lazy"` attribute. The Slider will automatically remove the attribute from images in adjacent slides. ## Container The `.z-slider-container` class is responsible for the clipping of the slider items. By default, the `data-z-slider` attribute applies this class to the same element. Alternatively, you can add this class manually to any element within the slider. That way, you can control which container clips the slider items. ```html

``` Since the slider effect needs a clipping container, box shadows of content items are also clipped. To widen the container to prevent box-shadows from clipping, add the `.z-slider-container-offset` class. ## Gap To apply a gap to the slider items, add left padding to each item, then add an equally negative margin on the parent element. ```html

``` ```html

``` ## Center By default, items of the slider always are aligned to the left. To center the list items, just add `center: true` to the attribute. ```html

``` ```html

``` ## 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 slider, use `pause-on-hover: true`. ```html

``` ## Infinite Scrolling By default, infinite scrolling is enabled. To disable this behavior, just add the `finite: true` option to the attribute. ```html

``` ## Slide Sets To loop through a set of slides instead of single items, just add `sets: true` to the attribute. ```html

``` ```html

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

``` The flexibility of the Slideshow component allows you to use any of the other UIkit components to navigate through items. For example the [Slidenav](/docs/latest/kit/slidenav), [Dotnav](/docs/latest/kit/dotnav) and [Thumbnav](/docs/latest/kit/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 `.z-slider-nav` class instead of adding navigation items manually. It will generate its items automatically using `

` as markup. This is a useful shortcut when using the [Dotnav](/docs/latest/kit/dotnav). ```html

``` ```html

``` ## Navigation outside To place a navigation outside of a slider, add the `.z-position-center-left-out` and the `.z-position-center-right-out` class from the [Position component](/docs/latest/kit/position) to the `previous` and `next` navigation. Make sure the `.z-slider-container` class, which is responsible for the clipping of the slider items, doesn't clip the navigation, too. ```html

``` ```html

``` ## Parallax animation Instead of a step-by-step animation using navigation controls, the slider 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. ```html

``` ```html

``` 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 slider'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 slider'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 slider's height. Both options allow basic mathematics operands, `+` and `-`. ```html

``` ```html

``` ## Card The slider is not restricted to images. Any content can be used like text, videos, images with text overlays or ken burns effect. Here is an example using the [Card component](/docs/latest/kit/card). ```html

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

``` Note Since the slider effect needs a clipping container, box shadows of content items are also clipped. To widen the container to prevent box-shadows from clipping, add the `.z-slider-container-offset` class. Alternatively, use the `z-slider="center: true"` mode if your content items have a box shadow. ## Content overlays Add content overlays using the [Position component](/docs/latest/kit/position). It allows you to place the content anywhere inside the slide. ```html

``` ```html

1

2

3

4

5

6

7

8

9

10

``` ## Content parallax Add the `data-z-slider-parallax` attribute to any element inside the slides to animate it together with the slider 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](/docs/latest/kit/parallax), and it allows animating CSS properties depending on the scroll position of the slider animation. Take a look at the [possible properties](/docs/latest/kit/parallax#usage) that can be animated. ```html

``` 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). ```html

``` 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`. ```html

``` ```html

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit amet.

``` ## Content transitions Add `clsActivated: z-transition-active` to the attribute to trigger transition classes from the [Transition component](/docs/latest/kit/transition) automatically inside slides. Contrary to the parallax effect, transitions are not attached to the slider animation and start playing independently after the slider animation. ```html

``` ```html