Слайдер : Slider

Создайте список элементов в качестве адаптивного слайдера - карусели.

Компонент «Слайдер» представляет собой адаптивное отображение элементов, которые можно прокручивать с помощью мыши или жестов, предназначенных для устройств с сенсорным экраном.

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

Чтобы применить компонент «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

Option Possible value Default Описание
center boolean false Режим центрирования элементов
threshold integer 10 Порог движения мыши в пикселях до момента перемещения элемента триггера
infinite boolean true Бесконечная прокрутка
activecls string uk-active Добавляется класс на активный элемент в режиме «Центр»
autoplay boolean false Определяет, должны ли элементы слайдера автоматически переключаться
pauseOnHover boolean true Пауза автозапуска при наведении
autoplayInterval integer 7000 Определяет промежуток времени между переключением элементов слайдера

Init element manually

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

Events

Name Parameter Description
focusitem.uk.slider event, index, item On item focus