Слайдер

• Использование
• Навигация
• Слайдер - режим «Центр»
• Отключить бесконечную прокрутку
• Зазоры
• Ширина элементов
• Адаптивное поведение
• Полноэкранный режим

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

Чтобы применить компонент «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 uk-grid-width-large-1-5">
            <li>...</li>
            <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>

Слайдер - режим «Центр»

По умолчанию элементы слайдера всегда выравниваются по левому краю слайдер-контейнера. Если вы хотите центрировать элементы, установите data-* атрибуту параметр 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 для изменения размера зазора.

Пример

<div data-uk-slider="">

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

</div>

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

Чтобы установить ширину для элементов, используйте классы ширины из grid-сетки UIkit 2. Либо используйте классы 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>

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

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

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

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

Init element manually

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

Events