Slideset

Create sets and groups of items, allowing to loop through the sets.

Usage

To apply this component, add the data-uk-slideset attribute to a container element. Add the default option to the data-uk-slideset attribute, to adjust the number of items within a set.

Example

Markup

<div data-uk-slideset="{default: 4}">
    <ul class="uk-grid uk-slideset">
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        ...
    </ul>
</div>

Navigations

To navigate through your slides, just use the uk-slideset-nav class. This will dynamically create a navigation depending on the number of existing slides.

Markup

<div data-uk-slideset="{default: 4}">
    <ul class="uk-grid uk-slideset">
        <li>...</li>
        <li>...</li>
    </ul>
    <ul class="uk-slideset-nav">...</ul>
</div>

To switch to the adjacent slides, use the data-uk-slideset-item attribute and set the attribute to next and previous. The elements with the data-uk-slideset-item attribute need to be inside the data-uk-slideset container.

Markup

<div data-uk-slideset="{default: 4}">
    <ul class="uk-grid uk-slideset">
        <li>...</li>
        <li>...</li>
    </ul>
    <a href=""data-uk-slideset-item="previous"></a>
    <a href=""data-uk-slideset-item="next"></a>
</div>

Slidenav and Dotnav

You can use any of the other UIkit components to navigate through a Slideset. For example the Slidenav and Dotnav can be used to style the slideset navigations as you can see below.

Example

Markup

<div data-uk-slideset="{default: 4}">
    <div class="uk-slidenav-position">
        <ul class="uk-grid uk-slideset">
            <li>...</li>
            <li>...</li>
        </ul>
        <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
        <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
    </div>
    <ul class="uk-slideset-nav uk-dotnav uk-flex-center">...</ul>
</div>

Responsive items

The slideset supports media query based items visibility. Just add a breakpoint option, like small, medium, large to the data-uk-slideset attribute. Add the number of items you want to display from the breakpoint upwards.

Example

Markup

<div data-uk-slideset="{small: 2, medium: 4, large: 6}">...</div>

Animations

There is a batch of animations which can be used to display the next set of items. Just add the animation option to the data-uk-slideset and set it to the desired animation. The animation duration can also be adjusted by using the duration option.

Example

Markup

<div data-uk-slideset="{animation: 'scale', duration: 200}">...</div>

Filter

You can also filter your slideset so that only particular items will be displayed. To do so, add the data-uk-filter attribute to each control to define the category you want to filter. Then you also need to add the data-uk-filter attribute to each slideset item to define what category the item belongs to.

NOTE The controls can be included in the slideset or referenced by adding the controls option to the data-uk-slideset attribute and passing the id to the option.

Example

Markup

<!-- The controls are included in the Slideset -->
<div data-uk-slideset>
    <ul>
        <li data-uk-filter=""><a></a></li>
        <li data-uk-filter="filter-a"><a></a></li>
        <li data-uk-filter="filter-b"><a></a></li>
    </ul>

    <ul class="uk-grid uk-slideset">
        <li data-uk-filter="filter-a"><img src=""></li>
        <li data-uk-filter="filter-b"><img src=""></li>
    </ul>
</div>

<!-- The controls are outside the Slideset -->
<ul id="my-id">
    <li data-uk-filter=""><a></a></li>
    <li data-uk-filter="filter-a"><a></a></li>
    <li data-uk-filter="filter-b"><a></a></li>
</ul>

<div data-uk-slideset"{controls: '#my-id'}">
    <ul class="uk-slideset">
        <li data-uk-filter="filter-a"><img src=""></li>
        <li data-uk-filter="filter-b"><img src=""></li>
    </ul>
</div>

JavaScript options

Init element manually

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

Events

Slider

Create a list of items to use as a responsive carousel slider

The slider is a responsive display of elements that can be scrolled through using the mouse or touch gestures.

Usage

To apply the Slider component, add the data-uk-slider attribute to a container element around a .uk-slider-container element. Add a list of items and assign the .uk-slider class to the list. Use the .uk-width-* and .uk-grid-width-* classes to determine how many elements are visible at once.

Example

Markup

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

Navigation

The slider itself can be scrolled with click and drag of the mouse or swiping on touch devices. It is a good idea to also add a clickable slidenav navigation. The slidenav adds arrows buttons that appear when you hover the slider.

Example

<div class="uk-slidenav-position" data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

</div>

Center Mode

By default, elements of the slider always align to the left edge of the slider container. If you want to center the elements instead, set the center attribute to true.

Note The center list element always has the class .uk-active added. You can make use of that if you want to highlight the center element.

Example

Markup

<div data-uk-slider="{center:true}">

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>


</div>

Disable Infinite Scrolling

By default, the slider loops through all items. To disable that behaviour, set the infinite parameter to false. This works both with center mode enabled and disabled.

Example

Markup

<div data-uk-slider="{infinite: false}">

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

Item gutter

If you want some spacing between your elements, add the .uk-grid class to the slider container. The elements will then be spaced according to the grid gutter.

Note You can use the modifiers uk-grid-medium and uk-grid-small to change the gutter.

Example

Item width

To set the widths of your elements, use the width classes from the UIkit grid. Either use the uk-grid-width-* classes on the slider container or use individual widths per list item using the uk-width-* classes.

Example: Individual widths

Markup

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider">
            <li class="uk-width-1-3">...</li>
            <li class="uk-width-1-5">...</li>
            <li class="uk-width-2-5">...</li>
            ...
        </ul>
    </div>

</div>

Responsive behaviour

To adapt to different viewports, you can use the responsive grid classes. In the following example, the slider displays four items on large viewports, three on medium and just one item on small ones.

Example: Responsive widths

Markup

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-3 uk-grid-width-large-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

Fullscreen mode

The slider includes a fullscreen mode where each slide stretches to 100% the height of the viewport.

Markup

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-slider-fullscreen">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

JavaScript options

Init element manually

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

Events

Dynamic Grid

Create a multi-column, dynamic grid layout whose items can be sorted and filtered.

The Dynamic Grid component allows you to create a dynamic and responsive grid layout utilizing the Grid component. Grid items will arrange themselves fluently and seamlessly for a gap-free multi-column layout on all device sizes.

Usage

To apply this component, add the data-uk-grid attribute to the container element. Set the width of the grid items by using the uk-width-* or .uk-grid-width-* classes from the Grid component.

Example

Markup

<!-- This is a grid using uk-width-* on each item -->
<div data-uk-grid>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
</div>

<!-- This is a grid using uk-grid-width-* on the grid itself -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid>
    <div>...</div>
    <div>...</div>
</div>

Grid Gutter

Divide grid items with a gutter by adding the {gutter: 20} option to the data attribute. In this case the gutter will be 20px wide.

Example

Markup

<div data-uk-grid="{gutter: 20}">...</div>

Filtering

You can also filter your grid so that only particular items will be displayed. To do so, add the {controls: '#my-id'} option to the data-attribute to target the id for the filter controls. Each control needs to have the data-uk-filter attribute to define the category you want to filter. Then you also need to add the data-uk-filter attribute to each grid item to define what category the item belongs to. Separate multiple categories by comma.

Example

• All
• Filter A
• Filter B

Markup

This example is using a Subnav to filter the items.

<!-- Filter Controls -->
<ul id="my-id" class="uk-subnav">
    <li data-uk-filter=""><a href=""></a></li>
    <li data-uk-filter="filter-a"><a href=""></a></li>
    <li data-uk-filter="filter-b"><a href=""></a></li>
</ul>

<!-- Dynamic Grid -->
<div data-uk-grid="{controls: '#my-id'}">
    <div data-uk-filter="filter-a">...</div>
    <div data-uk-filter="filter-b">...</div>
    <div data-uk-filter="filter-a,filter-b">...</div>
</div>

Sorting

To sort grid items ascendingly, add the {controls: '#my-id'} option to the data-attribute to target the id for the sorting controls.

Each control needs to have the data-uk-sort attribute with a custom value that targets the category you want to be sorted, for example data-uk-sort="my-category". You also need to add a data attribute to each grid item, using your target category's name. The value contains the data which should be sorted, for example data-my-category="my-data".

Items are sorted ascendingly by default. To sort the items descendingly just add :desc to the value of the controls' data attribute, for example data-uk-sort="my-category:desc".

Example

• Ascending
• Descending

Markup

<ul id="my-id" class="uk-subnav">
    <li data-uk-sort="my-category"><a href=""></a></li>
    <li data-uk-sort="my-category:desc"><a href=""></a></li>
</ul>

<div data-uk-grid="{controls: '#my-id'}">
    <div data-my-category="a">...</div>
    <div data-my-category="b">...</div>
</div>

Multiple categories

To use more than one category to sort grid items, use a different name for each category.

• Character (Asc)
• Character (Desc)
• Number (Asc)
• Number (Desc)

Markup

<ul id="my-id" class="uk-subnav">
    <li data-uk-sort="my-category"><a href=""></a></li>
    <li data-uk-sort="my-category:desc"><a href=""></a></li>
    <li data-uk-sort="my-category2"><a href=""></a></li>
    <li data-uk-sort="my-category2:desc"><a href=""></a></li>
</ul>

<div data-uk-grid="{controls: '#my-id'}">
    <div data-my-category="a" data-my-category2="8">...</div>
    <div data-my-category="b" data-my-category2="7">...</div>
</div>

JavaScript options

Init element manually

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

Events

Example

Listening for beforeupdate events with jQuery:

$(function() {
    $('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, children) {
        // your event-handling goes here
    });
});

Parallax Grid

Create an effect which scrolls the single columns of a grid with different speeds.

This component allows you to add a scrolling parallax effect to columns within a Grid from the Grid component.

Usage

To apply this component, add the data-uk-grid-parallax attribute to the container element. Set the width of the grid items by using the uk-width-* or .uk-grid-width-* classes from the Grid component.

Example

Javascript Arguments

To adjust the scroll speed, just change the arguments of the data-uk-grid-parallax attribute, for example like this: data-uk-grid-parallax="{translate:200}"

JavaScript options

This is an example of how to set options via attribute:

data-uk-grid-parallax="{translate:200}"

Init element manually

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