Компонент Слайдер : Slider

Многофункциональная карусель. Создайте отзывчивый слайдер. Добавление параллакс-эффектов. Переключение элементов сразу комплектами. Размещение любого контента с навигацией вне карусели.

Компонент Слайдер является полностью адаптивным и поддерживает сенсорную и swipe навигацию, а также перетаскивание мышью (для ПК). Он даже ускоряется вместе с вами, чтобы не отставать от вашего темпа, когда вы нажимаете на предыдущую и следующую навигацию. Все анимации аппаратно-ускоренные для более плавной работы.

Карусель. Создание

Чтобы применить компонент Слайдер, добавьте атрибут uk-slider к элементу контейнера и создайте список слайдов с классом .uk-slider-items. Добавьте изображение или любой другой контент для каждого элемента списка.

Чтобы определить ширину элементов слайдера, используйте компонент Ширина. Можно применить классы .uk-child-width-*, чтобы определить ширину всех элементов карусели, либо применить индивидуальную ширину для каждого элемента списка, используя классы .uk-width-*. Если конкретная ширина не установлена, то ширина каждого элемента будет равна размерам самого содержимого.

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</div>

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">1</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">2</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">3</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">4</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">5</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">6</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">7</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">8</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">9</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">10</div>
            </div>
        </li>

    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Примечание Чтобы "лениво загружать" изображения в слайды, взгляните на компонент Изображения.

Контейнер

Класс .uk-slider-container отвечает за "отсечение" элементов слайдера. По умолчанию атрибут uk-slider применяет этот класс к тому же элементу, где расположен сам. Кроме того, вы можете добавить этот класс вручную к любому элементу в слайдере. Таким образом, вы можете контролировать, какой контейнер обрезает элементы слайдера.

<div uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider-items uk-child-width-1-4">
            <li>
                <img src="" alt="">
            </li>
        </ul>
    </div>

</div>

Поскольку требуется контейнер отсечения, тени элементов также обрезаются. Чтобы решить вопрос с контейнером и предотвратить обрезку теней блока, добавьте класс .uk-slider-container-offset.

Зазоры в карусели

Чтобы добавить зазоры к элементам карусели, добавьте к слайдеру класс .uk-grid используя компонент Сетка / Grid. Элементы будут расположены в соответствии с зазорами сетки. Для изменения зазора вы можете использовать такие модификаторы, как .uk-grid-small, .uk-grid-medium и т.п..

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</div>

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid">
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">1</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">2</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">3</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">4</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">5</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">6</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">7</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">8</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">9</div>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/demo/img/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">10</div>
                </div>
            </div>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

По центру

По умолчанию элементы слайдера всегда выровнены по левому краю. Чтобы центрировать элементы списка, просто добавьте к атрибуту center: true. Готово! Слайдер по центру, а боковые картинки частично выглядывают по сторонам.

<div uk-slider="center: true">...</div>

- 1
- 2
- 3
- 4
- 5

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
    <ul class="uk-slider-items uk-grid">
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">1</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">2</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/light.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">3</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo2.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">4</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo3.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">5</div>
                </div>
            </div>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

В этом примере добавлен класс .uk-width-3-4 к каждому элементу, что делает слайдер очень похожим на слайд-шоу .

Слайдер. Автозапуск

Чтобы активировать автозапуск, просто добавьте к атрибуту опцию autoplay: true.

<div uk-slider="autoplay: true">...</div>

Вы также можете установить интервал в миллисекундах между переключением слайдов, добавив autoplay-interval: 6000. Чтобы приостановить автопроизведение при наведении курсора, используйте pause-on-hover: true.

Бесконечная прокрутка

По умолчанию бесконечная прокрутка включена. Чтобы отключить это поведение, просто добавьте в атрибут опцию finite: true.

<div uk-slider="finite: true">...</div>

Комплекты слайдера

Чтобы переключать / передвигать сразу комплектом (набор видимых в настоящее время элементов), а не по одному, просто добавьте к атрибуту sets: true.

<div uk-slider="sets: true">...</div>

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="sets: true">
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m">
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">1</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">2</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">3</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">4</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">5</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">6</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">7</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">8</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">9</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">10</div>
            </div>
        </li>

    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Для навигации по слайдам используйте атрибут uk-slider-item. Чтобы "нацелить" слайды, установите атрибут каждому элементу навигации со значением равным порядковому номеру соответствующего элемента слайдера.

Элементы с атрибутом uk-slider-item должны находиться внутри контейнера uk-slider.

Установленные атрибуты содержащие в себе next и previous позволят переключать на соседние слайды.

<div uk-slider>

    <ul class="uk-slider-items">...</ul>

    <a href="#" uk-slider-item="previous">...</a>
    <a href="#" uk-slider-item="next">...</a>

    <ul>
        <li uk-slider-item="0"><a href="#">...</a></li>
        <li uk-slider-item="1"><a href="#">...</a></li>
        <li uk-slider-item="2"><a href="#">...</a></li>
    </ul>

</div>

Гибкость компонента Слайдер позволяет использовать любые другие компоненты UIkit 3 для навигации по элементам. Например, компоненты Slidenav, Dotnav и Thumbnav могут использоваться для стилизации навигации в слайдере.

Если в элементах навигации нет конкретного содержимого элемента, вы также можете добавить класс .uk-slider-nav вместо добавления элементов навигации вручную. Он будет генерировать свои элементы автоматически, используя <li><a href="#"></a></li> в качестве разметки. Это полезный и короткий вариант при использовании Dotnav.

<div uk-slider>

    <ul class="uk-slider-items">
        ...
    </ul>

    <ul class="uk-slider-nav uk-dotnav"></ul>

</div>

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">1</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">2</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">3</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">4</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">5</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">6</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">7</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">8</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">9</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">10</div>
            </div>
        </li>

        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

Примечание Для лучшей видимости наложения навигации добавьте класс .uk-light или .uk-dark из компонента Инверсия.

Чтобы разместить навигацию вне слайдера (карусели), добавьте класс .uk-position-center-left-out и .uk-position-center-right-out из компонента Позиционирование к навигации previous и next. Убедитесь, что класс .uk-slider-container, который отвечает за отсечение элементов слайдера, расположен отдельно.

<div uk-slider>

    <div class="uk-position-relative">

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

        <a class="uk-position-center-left-out" href="#" uk-slider-item="previous">...</a>
        <a class="uk-position-center-right-out" href="#" uk-slider-item="next">...</a>

    </div>

    <ul class="uk-slider-nav uk-dotnav"></ul>

</div>

1

2

3

4

5

6

7

8

9

10

<div uk-slider>
    <div class="uk-position-relative">
        <div class="uk-slider-container uk-light">
            <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">1</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">2</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">3</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">4</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">5</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">6</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">7</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">8</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">9</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">10</div>
            </div>
        </li>

            </ul>
        </div>
        <div class="uk-hidden@s uk-light">
            <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
        <div class="uk-visible@s">
            <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

Высота окна просмотра : Viewport

Добавление атрибута uk-height-viewport из компонента Высота в список элементов слайдера приведет к растяжению высоты элементов <ul> и <li>, чтобы заполнить всю высоту области просмотра. Поскольку ширина и высота больше не определяются содержимым элемента, вы должны использовать абсолютное позиционирование для содержимого.

Используйте компонент Cover, чтобы изображения покрывали всю область элемента и обрезались. Класс .uk-grid-match из компонента Grid соответствует высоте прямого дочернего элемента каждого элемента. Это полезно в этом примере, поскольку дочерний элемент теперь применяет ту же ширину и высоту, что и элемент списка.

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-3@m uk-grid-match" uk-height-viewport="min-height: 300">
        <li>
            <div class="uk-cover-container">
                <img src="" alt="" uk-cover>
            </div>
        </li>
    </ul>
</div>

- 1
- 2
- 3
- 4
- 5

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
    <ul class="uk-slider-items uk-grid uk-grid-match" 
        uk-height-viewport="offset-top: true; 
                            offset-bottom: 30
                            ">
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="/demo/img/photo.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">1</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">2</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="/demo/img/light.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">3</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="/demo/img/photo2.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">4</div>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="/demo/img/photo3.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">5</div>
                </div>
            </div>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Примечание В этом примере высота установлена на 70% высоты области просмотра.

Добавление контента в слайдер / карусель

Слайдер не ограничен изображениями. Любой контент может быть использован в карусели, к примеру, текст, видео, изображения с наложением текста или эффект Кена Бернса.

Карусель с использованием компонента Card.

- Cлайдер
  
  Теория конечных целей идет далеко, когда она ограничивается, будущее предсуществует.
- Карусель
  
  Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.
- Карточка
  
  Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.
- Карта
  
  При этом сила доказательства будет пропорциональна степени удаленности взятых линий.
- Заголовок
  
  Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.

<div uk-slider="center: true">
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Cлайдер</h3>
                        <p>Теория конечных целей идет далеко, когда она ограничивается, будущее предсуществует.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/dark.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карусель</h3>
                        <p>Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/light.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карточка</h3>
                        <p>Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo2.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карта</h3>
                        <p>При этом сила доказательства будет пропорциональна степени удаленности взятых линий.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo3.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Заголовок</h3>
                        <p>Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.</p>
                    </div>
                </div>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

Примечание Так как для эффекта слайдера требуется контейнер "обрезки", тени элементов содержимого также обрезаются. Чтобы получить наилучший визуальный результат, можно использовать режим uk-slider="center: true". Если ваши элементы контента содержат тень от блока, то задача решается добавлением класса .uk-slider-container-offset

Без обрезки теней с использованием компонента Card.

- Карусель
  
  Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.
- Карточка
  
  Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.
- Карта
  
  При этом сила доказательства будет пропорциональна степени удаленности взятых линий.
- Заголовок
  
  Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.

<div class="uk-slider-container-offset" uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/dark.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карусель</h3>
                        <p>Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/light.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карточка</h3>
                        <p>Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo2.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карта</h3>
                        <p>При этом сила доказательства будет пропорциональна степени удаленности взятых линий.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo3.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Заголовок</h3>
                        <p>Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.</p>
                    </div>
                </div>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

Наложение контента

Добавьте наложение контента, используя компонент Позиционирование. Это позволит разместить контент в любом месте слайда.

<div uk-slider>
    <ul class="uk-slider-items">
        <li>
            <img src="" alt="">
            <div class="uk-position-center">

                <!-- Содержание идет здесь -->

            </div>
        </li>
    </ul>
</div>

Примечание Чтобы адаптировать контент для лучшей видимости каждого изображения, добавьте класс .uk-light или .uk-dark из компонента Инверсия или используйте Оверлей, чтобы добавить любой стиль с полем оверлея.

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">1</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">2</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">3</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">4</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">5</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">6</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">7</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">8</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">9</div>
            </div>
        </li>
        <li>
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1">10</div>
            </div>
        </li>

    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Добавление параллакс-эффектов в слайдер / карусель

Добавьте атрибут uk-slider-parallax к любому элементу внутри слайдов, чтобы анимировать его вместе с анимацией слайдера. Добавьте опцию с желаемыми значениями анимации для каждого свойства CSS, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, передав два значения через запятую.

Эта функциональность унаследована из компонента Параллакс и позволяет анимировать свойства CSS в зависимости от положения прокрутки анимации слайдера.

Посмотрите на возможные свойства, которые можно анимировать.

<div uk-slider>
    <ul class="uk-slider-items">
        <li>
            <img src="" alt="">
            <div class="uk-position-center">

                <div uk-slider-parallax="x: 100,-100">

                    <!-- Контент идёт здесь -->

                </div>

            </div>
        </li>
    </ul>
</div>

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

Для разных расстояний необходимы три значения:

Начало - слайд карусели стартует и анимация прибывает к центру,
Середина - слайд центрируется, хвастается содержимым на показ,
Конец - слайд отправляется с анимацией в свой путь, до новых встреч.

<div uk-slider-parallax="x: 300,0,-100">...</div>

Следующий пример определяет различные входящие и исходящие анимации. Контент перемещается, двигаясь от 100 до 0 и исчезает с 1 до 0.

<div uk-slider-parallax="x: 100,0,0; opacity: 1,1,0">...</div>

- Параллакс
  
  К элементу внутри слайдов.
- Эффекты
  
  Вместе с анимацией слайдера.
- Параллакс
  
  Позволяет анимировать свойства CSS.
- Карусель
  
  С желаемыми значениями анимации.
- Параллакс
  
  Контент продолжает анимироваться.

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
    <ul class="uk-slider-items uk-grid uk-grid-small">
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Параллакс</h5>
                    <p uk-slider-parallax="x: 200,-200">К элементу внутри слайдов.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Эффекты</h5>
                    <p uk-slider-parallax="x: 200,-200">Вместе с анимацией слайдера.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="/demo/img/light.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h5 class="uk-h1" uk-slider-parallax="x: 100,-100; color: #ff0000,#00ff48,#ffffff">Параллакс</h5>
                    <p uk-slider-parallax="x: 200,-200">Позволяет анимировать свойства CSS.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="/demo/img/photo2.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Карусель</h5>
                    <p uk-slider-parallax="x: 200,-200">С желаемыми значениями анимации.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="/demo/img/photo3.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Параллакс</h5>
                    <p uk-slider-parallax="x: 200,-200">Контент продолжает анимироваться.</p>
                </div>
            </div>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Контент переходы

Добавьте к атрибуту clsActivated: uk-transition-active, чтобы классы перехода из компонента Плавные переходы автоматически срабатывали внутри слайдов. В отличие от параллакс эффекта переходы "не прикрепляются" к анимации слайдера и начинают воспроизводиться независимо после анимации слайдера.

<div uk-slider="clsActivated: uk-transition-active">
    <ul class="uk-slider-items">
        <li>
            <img src="" alt="">
            <div class="uk-position-bottom">

                <div class="uk-transition-slide-bottom">

                    <!-- Здесь расположен контент -->

                </div>

            </div>
        </li>
    </ul>
</div>

При создании слайдера и размещении классического заголовка с описанием, совместно с Контент переходами, используется компонент Наложение (Overlay).

- Bottom
  
  Местные всезнайки рассуждали, что никто не найдет сокровищ.
- Bottom
  
  Цено напряжения воли вспомнить хоть что-нибудь.
- Bottom
  
  Местные задумали, что никто и не найдет письмена.
- Bottom
  
  Ценой колоссальной воли расписать хоть что-нибудь.
- Bottom
  
  Древние сочиняли, что никто не найдет давних сокровищ.

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="clsActivated: uk-transition-active; center: true">
    <ul class="uk-slider-items uk-grid">
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h6 class="uk-h3 uk-margin-remove">Bottom</h6>
                    <p class="uk-margin-remove">Местные всезнайки рассуждали, что никто не найдет сокровищ.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h6 class="uk-h3 uk-margin-remove">Bottom</h6>
                    <p class="uk-margin-remove">Цено напряжения воли вспомнить хоть что-нибудь.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/light.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h6 class="uk-h3 uk-margin-remove">Bottom</h6>
                    <p class="uk-margin-remove">Местные задумали, что никто и не найдет письмена.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo2.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h6 class="uk-h3 uk-margin-remove">Bottom</h6>
                    <p class="uk-margin-remove">Ценой колоссальной воли расписать хоть что-нибудь.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="/demo/img/photo3.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h6 class="uk-h3 uk-margin-remove">Bottom</h6>
                    <p class="uk-margin-remove">Древние сочиняли, что никто не найдет давних сокровищ.</p>
                </div>
            </div>
        </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>

Переходы при наведении

Чтобы переключать переходы при наведении, используйте класс .uk-transition-toggle из компонента Плавные переходы и tabindex="0". Плавный переход элементов будет срабатывать при наведении или когда элемент имеет фокус.

<div uk-slider>
    <ul class="uk-slider-items">
        <li class="uk-transition-toggle" tabindex="0">
            <img src="" alt="">
            <div class="uk-position-bottom">

                <div class="uk-transition-slide-bottom">

                    <!-- Контент идет здесь -->

                </div>

            </div>
        </li>
    </ul>
</div>

- А
- Б
- В
- Г
- Д
- Е
- Ё
- Ж
- З
- И

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light">
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">А</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Б</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">В</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Г</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Д</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Е</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Ё</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">Ж</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">З</div>
            </div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="/demo/img/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel">
                <div class="uk-h1 uk-transition-slide-bottom-small">И</div>
            </div>
        </li>
    </ul>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

Опции компонента

При использовании компонента Slider к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Слайдер

Опция	Значение	По умолчанию	Описание
`autoplay`	Boolean	`false`	Автовоспроизведение слайдера.
`autoplay-interval`	Number	`7000`	Задержка между переключением слайдов в режиме автовоспроизведения.
`center`	Boolean	`false`	Центрирование активного слайда.
`draggable`	Boolean	`true`	Включить перетаскивание.
`easing`	String	`ease`	The animation easing (CSS timing functions or cubic-bezier).
`finite`	Boolean	`false`	Отключить бесконечную прокрутку.
`index`	Number	`0`	Элемент слайдера для отображения.Индекс начинается с 0.
`pause-on-hover`	Boolean	`true`	Приостановить режим автозапуска при наведении.
`sets`	Boolean	`false`	Слайд в наборах (комплектах).
`velocity`	Number	`1`	Скорость анимации (пиксель / мс).

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.slider(element, options);

События

Следующие события будут инициированы для элементов компонента «Slider»:

Название	Описание
`beforeitemshow`	Срабатывает до отображения элемента.
`itemshow`	Срабатывает после отображения элемента.
`itemshown`	Запускается после завершения анимации показанного элемента.
`beforeitemhide`	Срабатывает до того, как элемент скрыт.
`itemhide`	Срабатывает после запуска анимации скрытия элемента.
`itemhidden`	Срабатывает после завершения анимации скрытия элемента.

Методы

Для компонента «Slider» доступны следующие методы:

Show

UIkit.slider(element).show(index);

Показывает элемент слайдера.

startAutoplay

UIkit.slider(element).startAutoplay();

Запускает автозапуск слайда.

stopAutoplay

UIkit.slider(element).stopAutoplay();

Останавливает автозапуск слайдера.

Карусель. Создание

Контейнер

Зазоры в карусели

По центру

Слайдер. Автозапуск

Бесконечная прокрутка

Комплекты слайдера

Навигация

Навигация вне слайдера, снаружи

Высота окна просмотра : Viewport

Добавление контента в слайдер / карусель

Cлайдер

Карусель

Карточка

Карта

Заголовок

Карусель

Карточка

Карта

Заголовок

Наложение контента

Добавление параллакс-эффектов в слайдер / карусель

Параллакс

Эффекты

Параллакс

Карусель

Параллакс

Контент переходы

Bottom

Bottom

Bottom

Bottom

Bottom

Переходы при наведении

Опции компонента

Слайдер

JavaScript

Инициализация

События

Методы

Show

startAutoplay

stopAutoplay