Слайдер

Создать список элементов для использования в качестве aдаптивный карусель слайдер

Ползунок-это aдаптивный отображение элементов, которые можно прокручивать с помощью мыши или жестов.

Использование

Применять компонент Slider, добавить data-uk-slider атрибут в элемент-контейнер вокруг .uk-slider-container элемент. Добавить список предметов и назначать на .uk-slider класс для списка. Используйте .uk-width-* и .uk-grid-width-* классы, чтобы определить, сколько элементов видны сразу.

Пример

Разметки

<div data-uk-slider>

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

</div>

Навигация

Сам ползунок, можно прокручивать с помощью мыши и перетащите мышкой или пальцем на сенсорных устройствах. Это хорошая идея, чтобы также добавить кликабельный slidenav навигации. В slidenav добавляет стрелки, кнопки, которые появляются, когда вы наведение ползунка.

Пример

<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 атрибут true.

Примечание центр списку элемента всегда имеет класс .uk-active Добавил. Вы можете использовать это если вы хотите выделить Центральный элемент.

Пример

Разметки

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

Отключить Бесконечную Прокрутку

По умолчанию, ползунок перебирает все элементы. Чтобы отключить такое поведение, установите infinite параметр false. Этот центр работает как с включенным режимом и инвалидов.

Пример

Разметки

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

Элемент желоба

Если вы хотите, чтобы некоторые интервалы между элементами, добавить .uk-grid класс к ползунку контейнер. Элементы будут разнесены по сообщению грид сточной канавы.

Примечание Вы можете использовать модификаторы uk-grid-medium и uk-grid-small Чтобы изменить канаве.

Пример

Ширина элемента

Установить ширину вашей элементы, использовать ширину классы от UIkit грид. Либо используйте uk-grid-width-* классы на ползунок контейнера или использование индивидуальной ширины каждого элемента списка с помощью директивы uk-width-* классы.

Пример: индивидуальный ширины

Разметки

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

Адаптивный поведение

Адаптироваться в разных видовых экранах, вы можете использовать aдаптивный грид классов. В следующем примере, ползунок отображает четырех предметов на большие видовые окна, три на средний, и только один пункт на мелких.

Пример: Адаптивный ширины

Разметки

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

Полноэкранный режим

Ползунок включает в себя полноэкранный режим, где каждый слайд растягивается на 100% высоты окна просмотра.

Разметки

<div data-uk-slider>

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

</div>

JavaScript варианты

Инициализации элементов вручную

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

События