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

Создайте отзывчивый слайдер. Многофункциональная карусель.

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

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

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

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

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</div>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
        <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
    <!-- Список -->
            <li>
                <img src="/demo/img/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">1</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">2</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">3</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">4</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">5</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">6</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">7</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">8</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">9</div>
                </div>
            </li>
            <li>
                <img src="/demo/img/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel">
                    <div class="uk-h1">10</div>
                </div>
            </li>
    <!-- // Список -->
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
Примечание Чтобы "лениво загружать" изображения в слайды, взгляните на компонент Изображения.

Контейнер

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

<div uk-slider>

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

</div>

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

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

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

По центру

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

<div uk-slider>

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

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

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

</div>

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

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

<div uk-slider>

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

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

</div>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • <div uk-slider>
          <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
              <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
      <!-- Список -->
              <li>
                  <img src="/demo/img/slider1.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">1</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider2.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">2</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider3.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">3</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider4.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">4</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider5.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">5</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider1.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">6</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider2.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">7</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider3.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">8</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider4.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">9</div>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/slider5.jpg" alt="">
                  <div class="uk-position-center uk-panel">
                      <div class="uk-h1">10</div>
                  </div>
              </li>
      <!-- // Список -->
              </ul>
              <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
              <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
          </div>
          <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
      </div>
    Примечание Для лучшей видимости наложения навигации добавьте класс .uk-light или .uk-dark из компонента Инверсия.

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

    <div uk-slider>
    
        <div class="uk-position-relative">
    
            <div class="uk-slider-container">
                <ul class="uk-slider-items">...</ul>
            </div>
    
            <a class="uk-position-center-left-out" href="#" uk-slider-item="previous">...</a>
            <a class="uk-position-center-right-out" href="#" uk-slider-item="next">...</a>
    
        </div>
    
        <ul class="uk-slider-nav uk-dotnav"></ul>
    
    </div>
    
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • <div uk-slider>
            <div class="uk-position-relative">
                <div class="uk-slider-container uk-light">
                    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <!-- Список -->
                <li>
                    <img src="/demo/img/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">1</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">2</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">3</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">4</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">5</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">6</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">7</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">8</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">9</div>
                    </div>
                </li>
                <li>
                    <img src="/demo/img/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel">
                        <div class="uk-h1">10</div>
                    </div>
                </li>
        <!-- // Список -->
                    </ul>
                </div>
                <div class="uk-hidden@s uk-light">
                    <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
                </div>
                <div class="uk-visible@s">
                    <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
                </div>
            </div>
            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
        </div>

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

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

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

      <div uk-slider>
          <ul class="uk-slider-items uk-child-width-1-3@m uk-grid-match" uk-height-viewport="min-height: 300">
              <li>
                  <div class="uk-cover-container">
                      <img src="" alt="" uk-cover>
                  </div>
              </li>
          </ul>
      </div>
      
        • 1
        • 2
        • 3
        • 4
        • 5
      • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
            <ul class="uk-slider-items uk-grid uk-grid-match" 
                uk-height-viewport="offset-top: true; 
                                    offset-bottom: 30
                                    ">
                <li class="uk-width-3-4">
                    <div class="uk-cover-container">
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                        <div class="uk-position-center uk-panel">
                            <div class="uk-h1">1</div>
                        </div>
                    </div>
                </li>
                <li class="uk-width-3-4">
                    <div class="uk-cover-container">
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                        <div class="uk-position-center uk-panel">
                            <div class="uk-h1">2</div>
                        </div>
                    </div>
                </li>
                <li class="uk-width-3-4">
                    <div class="uk-cover-container">
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                        <div class="uk-position-center uk-panel">
                            <div class="uk-h1">3</div>
                        </div>
                    </div>
                </li>
                <li class="uk-width-3-4">
                    <div class="uk-cover-container">
                        <img src="/demo/img/photo2.jpg" alt="" uk-cover>
                        <div class="uk-position-center uk-panel">
                            <div class="uk-h1">4</div>
                        </div>
                    </div>
                </li>
                <li class="uk-width-3-4">
                    <div class="uk-cover-container">
                        <img src="/demo/img/photo3.jpg" alt="" uk-cover>
                        <div class="uk-position-center uk-panel">
                            <div class="uk-h1">5</div>
                        </div>
                    </div>
                </li>
            </ul>
            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
      Примечание В этом примере высота установлена на 70% высоты области просмотра.

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

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

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

        • Cлайдер

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

        • Карусель

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

        • Карточка

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

        • Карта

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

        • Заголовок

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

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

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

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

        <div uk-slider>
            <ul class="uk-slider-items">
                <li>
                    <img src="" alt="">
                    <div class="uk-position-center">
        
                        <!-- Содержание идет здесь -->
        
                    </div>
                </li>
            </ul>
        </div>
        
        Примечание Чтобы адаптировать контент для лучшей видимости каждого изображения, добавьте класс .uk-light или .uk-dark из компонента Инверсия или используйте Оверлей, чтобы добавить любой стиль с полем оверлея.
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
        • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
              <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
          <!-- Список -->
                  <li>
                      <img src="/demo/img/slider1.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">1</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">2</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider3.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">3</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider4.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">4</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider5.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">5</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider1.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">6</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider2.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">7</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider3.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">8</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider4.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">9</div>
                      </div>
                  </li>
                  <li>
                      <img src="/demo/img/slider5.jpg" alt="">
                      <div class="uk-position-center uk-panel">
                          <div class="uk-h1">10</div>
                      </div>
                  </li>
          <!-- // Список -->
              </ul>
              <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
              <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
          </div>

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

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

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

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

        <div uk-slider>
            <ul class="uk-slider-items">
                <li>
                    <img src="" alt="">
                    <div class="uk-position-center">
        
                        <div uk-slider-parallax="x: 100,-100">
        
                            <!-- Контент идёт здесь -->
        
                        </div>
        
                    </div>
                </li>
            </ul>
        </div>
        

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

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

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

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

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

        <div uk-slider-parallax="x: 100,0,0; opacity: 1,1,0">...</div>
        
          • Параллакс

            К элементу внутри слайдов.

          • Эффекты

            Вместе с анимацией слайдера.

          • Параллакс

            Позволяет анимировать свойства CSS.

          • Карусель

            С желаемыми значениями анимации.

          • Параллакс

            Контент продолжает анимироваться.

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

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

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

        <div uk-slider="clsActivated: uk-transition-active">
            <ul class="uk-slider-items">
                <li>
                    <img src="" alt="">
                    <div class="uk-position-bottom">
        
                        <div class="uk-transition-slide-bottom">
        
                            <!-- The content goes here -->
        
                        </div>
        
                    </div>
                </li>
            </ul>
        </div>
        

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

          • Bottom

            Местные всезнайки рассуждали, что никто не найдет сокровищ.

          • Bottom

            Цено напряжения воли вспомнить хоть что-нибудь.

          • Bottom

            Местные задумали, что никто и не найдет письмена.

          • Bottom

            Ценой колоссальной воли расписать хоть что-нибудь.

          • Bottom

            Древние сочиняли, что никто не найдет давних сокровищ.

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

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

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

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

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

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

          Слайдер

          Опция Значение По умолчанию Описание
          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);
          

          События

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

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

          Методы

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

          Show

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

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

          startAutoplay

          UIkit.slider(element).startAutoplay();
          

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

          stopAutoplay

          UIkit.slider(element).stopAutoplay();
          

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

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