Компонент Слайдер 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="" width="" height="" alt="">
        </li>
    </ul>
</div>
    • Слайдер
      1
    • Слайдер
      2
    • Слайдер
      3
    • Слайдер
      4
    • Слайдер
      5
    • Слайдер
      6
    • Слайдер
      7
    • Слайдер
      8
  • <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" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">1</div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">2</div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">3</div>
            </li>
            <li>
                <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">4</div>
            </li>
            <li>
                <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">5</div>
            </li>
            <li>
                <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">6</div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">7</div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel uk-text-large">8</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>

Совет Чтобы лениво загружать изображения в слайды, используйте атрибут loading="lazy". Slider автоматически удалит этот атрибут с изображений на соседних слайдах.

Контейнер

Класс .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="" width="" height="" 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="" width="" height="" alt="">
        </li>
    </ul>
</div>
    • Слайдер
      1
    • Слайдер
      2
    • Слайдер
      3
    • Слайдер
      4
    • Слайдер
      5
    • Слайдер
      6
    • Слайдер
      7
  • <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <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" width="400" height="600" alt="Слайдер" loading="lazy">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">7</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>

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

    • Слайдер
      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" width="900" height="600" alt="Слайдер" loading="lazy">
                    <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" width="900" height="600" alt="Слайдер" loading="lazy">
                    <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" width="900" height="600" alt="Слайдер" loading="lazy">
                    <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" width="900" height="600" alt="Слайдер" loading="lazy">
                    <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" width="900" height="600" alt="Слайдер" loading="lazy">
                    <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>

Автозапуск

Чтобы активировать автозапуск слайдера, просто добавьте к атрибуту опцию 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" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">1</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">2</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">3</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">4</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">5</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">6</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">7</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">8</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">9</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider5.jpg" width="400" height="600" 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
    • <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" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">1</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">2</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">3</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">4</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">5</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">6</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
                      <div class="uk-position-center uk-panel uk-text-large">7</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
      • <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" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">1</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">2</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">3</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">4</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">5</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">6</div>
        				</li>
        				<li>
        					<img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер">
        					<div class="uk-position-center uk-panel uk-text-large">7</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>

      Параллакс-анимация

      Вместо пошаговой анимации с помощью элементов управления навигацией слайдер может использовать плавную параллакс-анимацию, основанную на его положении при прокрутке в области просмотра. Просто добавьте к атрибуту parallax: true. Если в разметке задана навигация, она не будет кликабельной, но получит активное состояние текущего слайда.

      <div uk-slider="parallax: true">…</div>
        • Изображение слайдера
          1
        • Изображение слайдера
          2
        • Изображение слайдера
          3
        • Изображение слайдера
          4
        • Изображение слайдера
          5
        • Изображение слайдера
          6
        • Изображение слайдера
          7
        • Изображение слайдера
          8
        • Изображение слайдера
          9
        • Изображение слайдера
          10
        • <div uk-slider="parallax: true;">
          
              <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>
                      <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">1</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">2</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">3</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">4</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">5</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">6</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">7</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">8</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">9</div>
                  </li>
                  <li>
                      <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                      <div class="uk-position-center uk-panel uk-text-large">10</div>
                  </li>
              </ul>
          
              <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
          
          </div>

        Чтобы настроить длительность параллакса, задайте параметры parallax-start и parallax-end.

        Параметр parallax-start
        Определяет, когда начинается анимация. Значение по умолчанию 0 означает, что верхняя граница слайдера и нижняя граница области просмотра пересекаются.
        Параметр parallax-end
        Определяет, когда анимация заканчивается. Значение по умолчанию 0 означает, что нижняя граница слайдера и верхняя граница области просмотра пересекаются.

        Значения могут быть заданы в любых единицах измерения, а именно vh, % и px. Единица % относится к высоте слайдера. Оба параметра позволяют использовать базовые математические операнды + и -.

        <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%;">…</div>
        
          • Изображение слайдера
            1
          • Изображение слайдера
            2
          • Изображение слайдера
            3
          • Изображение слайдера
            4
          • Изображение слайдера
            5
          • Изображение слайдера
            6
          • Изображение слайдера
            7
          • Изображение слайдера
            8
          • Изображение слайдера
            9
          • Изображение слайдера
            10
          • <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%;">
            
                <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>
                        <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">1</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">2</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">3</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">4</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">5</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">6</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">7</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">8</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">9</div>
                    </li>
                    <li>
                        <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Изображение слайдера" loading="lazy">
                        <div class="uk-position-center uk-panel uk-text-large">10</div>
                    </li>
                </ul>
            
                <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="" width="" height="" alt="" uk-cover>
                      </div>
                  </li>
              </ul>
          </div>
          
          Примечание В этом примере высота установлена на 70% высоты области просмотра.
            • Слайдер
              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 loading="lazy">
                            <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 loading="lazy">
                            <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 loading="lazy">
                            <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 loading="lazy">
                            <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 loading="lazy">
                            <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>

          Контент

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

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

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

            • Слайдер

              Cлайдер

              Теория конечных целей идет далеко, когда она ограничивается, будущее предсуществует.

            • Слайдер

              Карусель

              Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.

            • Слайдер

              Карточка

              Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.

            • Слайдер

              Карта

              При этом сила доказательства будет пропорциональна степени удаленности взятых линий.

            • Слайдер

              Заголовок

              Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.

            • <div uk-slider="center: true">
                  <div class="uk-position-relative uk-margin-small-top 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" width="900" height="600" alt="Слайдер" loading="lazy">
                                  </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                  </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                  </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                  </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                  </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                    </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                    </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                    </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" width="900" height="600" alt="Слайдер" loading="lazy">
                                    </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="" width="" height="" alt="">
                          <div class="uk-position-center">
              
                              <!-- Контент... -->
              
                          </div>
                      </li>
                  </ul>
              </div>
              
              Примечание Чтобы адаптировать контент для лучшей видимости каждого изображения, добавьте класс .uk-light или .uk-dark из компонента Инверсия или используйте Оверлей, чтобы добавить любой стиль с полем оверлея.
                • Слайдер
                  1
                • Слайдер
                  2
                • Слайдер
                  3
                • Слайдер
                  4
                • Слайдер
                  5
                • Слайдер
                  6
                • Слайдер
                  7
              • <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" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">1</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">2</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">3</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">4</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">5</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">6</div>
                        </li>
                        <li>
                            <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер" loading="lazy">
                            <div class="uk-position-center uk-panel uk-text-large">7</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="" width="" height="" 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" width="1800" height="1200" alt="Слайдер" loading="lazy">
                                <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" width="1800" height="1200" alt="Слайдер" loading="lazy">
                                <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" width="1800" height="1200" alt="Слайдер" loading="lazy">
                                <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" width="1800" height="1200" alt="Слайдер" loading="lazy">
                                <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" width="1800" height="1200" alt="Слайдер" loading="lazy">
                                <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="" width="" height="" 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" width="900" height="600" alt="Слайдер" loading="lazy">
                                <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" width="900" height="600" alt="Слайдер" loading="lazy">
                                <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" width="900" height="600" alt="Слайдер" loading="lazy">
                                <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" width="900" height="600" alt="Слайдер" loading="lazy">
                                <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" width="900" height="600" alt="Слайдер" loading="lazy">
                                <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="" width="" height="" 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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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" width="400" height="600" alt="Слайдер" loading="lazy">
                              <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();
                

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

                Доступность

                Компонент Slider соответствует Carousel (Slide Show or Image Rotator) Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

                • Слайдер имеет свойство aria-roledescription с установленным значением carousel.
                • Список слайдов имеет идентификатор (ID), роль presentation и свойство aria-live.
                • Слайды имеют идентификатор, роль group, если у слайдера есть только предыдущая/следующая навигация, или tabpanel роль, если у него есть навигация по вкладкам, свойство aria-roledescription содержащее slide и свойство aria-label.

                Навигация по вкладкам (вкладочная таб-навигация, точечная) соответствует Tabs Pattern.

                • Навигация по вкладкам имеет роль tablist.
                • Элементы навигации по вкладкам имеют роль presentation.
                • Ссылки навигации по вкладкам имеют роль tab, состояние aria-selected, свойство aria-controls установленное на идентификатор соответствующего слайда и свойство aria-label.

                Предыдущая/следующая навигация придерживается Button Pattern.

                • У элементов навигации prev/next есть свойство aria-label, свойство aria-controls установленное на идентификатор списка слайдов, и, если используется элемент <a>, то роль button.

                Взаимодействие с клавиатурой

                Автовоспроизведение (autoplay) останавливается, когда любой элемент в компоненте Slider получает фокус. Доступ к навигации по вкладкам можно получить с клавиатуры, используя следующие клавиши.

                • Клавиши tab или shift+tab перемещают фокус на активную вкладку в навигации по вкладкам. Если фокус уже находится на активной вкладке, фокус переместится на следующий элемент за пределами навигации по вкладкам.
                • Клавиши left/right arrow или right/down arrow в зависимости от ориентации, позволяют перемещаться по вкладкам. Соответствующий слайд станет активным автоматически. Если фокус находится на последней вкладке, он перемещается на первую вкладку.
                • Клавиши home или end перемещают фокус на первую или последнюю вкладку.

                Интернационализация

                Компонент Slider использует следующие строки перевода:
                Ключ По умолчанию Описание
                next Next Slide aria-label для кнопки следующего слайда.
                previous Previous Slide aria-label для кнопки предыдущего слайда.
                slideX Slide %s aria-label для кнопки пагинации слайдера.
                slideLabel %s of %s aria-label для слайда.

                Подробнее о переводе компонентов.