# 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.

Animation | Description
--- | ---
`fade` | The items fade in and out.
`scale` | The items scale up and down.
`slide-horizontal` | The items slide to the side.
`slide-vertical` | The items slide vertically.
`slide-top` | The items slide to and from the top.
`slide-bottom` | The items slide to and from the bottom.

### 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

Option | Possible value | Default | Description
--- | --- | --- | ---
`default` | integer | 1 | Default visible items in a set
`small` | integer | null | Visible items in a set at small breakpoint
`medium` | integer | null | Visible items in a set at medium breakpoint
`large` | integer | null | Visible items in a set at large breakpoint
`xlarge` | integer | null | Visible items in a set at xlarge breakpoint
`animation` | string | 'fade' | Animation name
`duration` | integer | 200 | Animation duration in ms
`delay` | integer | 100 | Animation delay between items in a set
`filter` | string | '' | Items filter
`autoplay` | false | Defines whether or not the slideset items should switch automatically.
`pauseOnHover` | true | Pause autoplay when hovering a slideset.
`autoplayInterval` | 7000 | Defines the timespan between switching slideset items.

### Init element manually

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

### Events

Name | Parameter | Description
--- | --- | ---
`show.uk.slideset` | event, set | On set show