Документация UIkit 3 на русском

Главная
Слайдер

Создавайте отзывчивые слайдеры на своих страницах с помощью UIkit 3.

Новый компонент Слайдер позволяет отображать несколько элементов контента одновременно. Вы можете скользить по ряду элементов, плавно раскрывая новые. Слайдер создан с нуля, разделяя кодовую базу с компонентом Слайд-шоу. И помните, все это теперь работает без зависимости от jQuery! :-)

Все варианты работы слайдера смотрите в разделе тесты

Компонент Slider является полностью адаптивным и поддерживает сенсорную и свайп навигацию, а также перетаскивание мышью для настольных ПК. Он может ускоряться, чтобы не отставать от вашего темпа, когда вы листаете элементы. Все анимации имеют аппаратное ускорение для более плавной работы.

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

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

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

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@m">
        <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="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></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-grid к слайдеру. Элементы будут расположены в соответствии с оступами сетки. Вы можете использовать такие модификаторы, как .uk-grid-small для изменения размеров отступов.

<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="images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>6</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>7</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>8</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>9</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>10</h1></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="images/photo.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/dark.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/light.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></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 к атрибуту. Вы также можете установить интервал в миллисекундах между переключением слайдов, используя autoplay-interval: 6000. Чтобы приостановить автозапуск при наведении мыши, используйте pause-on-hover: true.

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

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

По умолчанию бесконечная прокрутка включена. Чтобы отключить это поведение, просто добавьте опцию 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="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></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>

Гибкость компонента Slideshow позволяет использовать любые другие компоненты UIkit 3 для навигации по элементам. Например, компоненты Навигация слайдера, Точечная навигация и Эскизы могут быть использованы для оформления стиля слайд-шоу.

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

<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="images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </li>
            <li>
                <img src="images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </li>
            <li>
                <img src="images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </li>
            <li>
                <img src="images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </li>
            <li>
                <img src="images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </li>
            <li>
                <img src="images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>6</h1></div>
            </li>
            <li>
                <img src="images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>7</h1></div>
            </li>
            <li>
                <img src="images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>8</h1></div>
            </li>
            <li>
                <img src="images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>9</h1></div>
            </li>
            <li>
                <img src="images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>10</h1></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="images/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>1</h1></div>
                </li>
                <li>
                    <img src="images/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>2</h1></div>
                </li>
                <li>
                    <img src="images/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>3</h1></div>
                </li>
                <li>
                    <img src="images/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>4</h1></div>
                </li>
                <li>
                    <img src="images/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>5</h1></div>
                </li>
                <li>
                    <img src="images/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>6</h1></div>
                </li>
                <li>
                    <img src="images/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>7</h1></div>
                </li>
                <li>
                    <img src="images/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>8</h1></div>
                </li>
                <li>
                    <img src="images/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>9</h1></div>
                </li>
                <li>
                    <img src="images/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>10</h1></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>

Высота области просмотра

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

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

<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="images/photo.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/dark.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/light.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/photo2.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/photo3.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>5</h1></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% высоты области просмотра.

Содержимое

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

- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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="images/photo.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/dark.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/light.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo2.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo3.jpg" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</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", если ваши элементы контента имеют тень.

Наложение

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

<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="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></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, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, указав два значения через запятую.

Эта функциональность создается с применением компонента Parallax, и позволяет анимировать свойства 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. Это работает, потому что начальные и конечные значения имеют одинаковое расстояние. Для разных расстояний необходимы три значения: Start (начало анимации слайда), Middle (слайд центрирован), End (слайд исчезает).

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

- Заголовок
  
  Lorem ipsum dolor sit amet.
- Заголовок
  
  Lorem ipsum dolor sit amet.
- Заголовок
  
  Lorem ipsum dolor sit amet.
- Заголовок
  
  Lorem ipsum dolor sit amet.
- Заголовок
  
  Lorem ipsum dolor sit amet.

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>

    <ul class="uk-slider-items uk-grid">
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/dark.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/light.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo2.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo3.jpg" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</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>

Вместе с компонентом Наложение переходы используются для создания классического заголовка для слайдера.

- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Заголовок
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<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="images/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h3 class="uk-margin-remove">Bottom</h3>
                    <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/dark.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h3 class="uk-margin-remove">Bottom</h3>
                    <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/light.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h3 class="uk-margin-remove">Bottom</h3>
                    <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo2.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h3 class="uk-margin-remove">Bottom</h3>
                    <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </li>
        <li class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo3.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                    <h3 class="uk-margin-remove">Bottom</h3>
                    <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

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

<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="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider1.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider2.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider3.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider4.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
        </li>
        <li class="uk-transition-toggle" tabindex="0">
            <img src="images/slider5.jpg" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></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`	Включить перетаскивание.
`finite`	Boolean	`false`	Отключение бесконечной прокрутки.
`index`	Number	`0`	Номер слайда для показа. Начинается с 0
`pause-on-hover`	Boolean	`true`	Остановить прокрутку при наведении.
`sets`	Boolean	`false`	Слайд в наборе.
`velocity`	Number	`1`	Скорость анимации (pixel/ms).

JavaScript

Подробнее о Компонентах JavaScript.

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

UIkit.slider(element, options);

События

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

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

Методы

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

Show

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

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

startAutoplay

UIkit.slider(element).startAutoplay();

Запускает автопрокрутку.

stopAutoplay

UIkit.slider(element).stopAutoplay();

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

Документация

Слайдер

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

1

2

3

4

5

6

7

8

9

10

Заголовок

Заголовок

Заголовок