Компонент Слайд-шоу : Slideshow

Создайте адаптивное слайд-шоу с изображениями и видео.

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

Руководство

Чтобы применить этот компонент, добавьте атрибут uk-slideshow к элементу контейнера и создайте список слайдов с классом .uk-slideshow-items.

Добавьте изображение на заднем плане каждого слайда, с использованием атрибута uk-cover из компонента Cover.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
        </li>
    </ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <img src="/demo/img/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/light.jpg" alt="" uk-cover>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>
Примечание Чтобы загружать изображения в слайд-шоу по принципу «ленивой загрузки» (Lazy loading), взгляните на компонент Изображение.

Анимации слайд-шоу

По умолчанию в слайд-шоу используется анимация slide. Вы можете установить опцию animation для использования другой анимации. Возможны следующие значения:

Анимация Описание
slide Слайды скользят в бок.
fade Слайды плавно исчезают и появляются.
scale Слайды масштабируются и исчезают.
pull Слайды будто вытягиваются из колоды; "срезает колоду".
push Слайды скользят будто накладываются на колоду.
<div uk-slideshow="animation: fade">...</div>

Варианты анимаций

  • Slide
    Fade
    Scale
    Pull
    Push
  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-h3">Slide</div>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
        <div>
            <div class="uk-h3">Fade</div>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
        <div>
            <div class="uk-h3">Scale</div>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale">
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
        <div>
            <div class="uk-h3">Pull</div>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: pull">
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
        <div>
            <div class="uk-h3">Push</div>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="/demo/img/photo.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/dark.jpg" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="/demo/img/light.jpg" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
    </div>

Слайд-шоу. Автозапуск

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

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

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

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

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

Соотношение : Параметр «Ratio»

Слайд-шоу всегда занимает всю ширину родительского контейнера. Высота регулируется в соответствии с заданным соотношением. Чтобы изменить соотношение по умолчанию 16:9, просто добавьте в атрибут опцию ratio. Рекомендуется использовать тот же коэффициент, что и для фоновых изображений. Например, используйте их ширину и высоту, например 1600:1200.

<div uk-slideshow="ratio: 7:3">...</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">
        <ul class="uk-slideshow-items">
            <li>
                <img src="/demo/img/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/light.jpg" alt="" uk-cover>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

Мин. / Макс. Высота

По умолчанию высота слайд-шоу соответствует определенному соотношению. Минимальная или максимальная высота может быть установлена с помощью параметров min-height и max-height.

<div uk-slideshow="min-height: 300; max-height: 600">...</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">
        <ul class="uk-slideshow-items">
            <li>
                <img src="/demo/img/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/light.jpg" alt="" uk-cover>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

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

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

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">
        <ul class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
            <li>
                <img src="/demo/img/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/demo/img/light.jpg" alt="" uk-cover>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>
Примечание Этот пример демонстрирует 70% высоты области просмотра.

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

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

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

<div uk-slideshow>

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

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

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

</div>

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

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

<div uk-slideshow>

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

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

</div>
    • <div uk-slideshow="animation: push">
          <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
              <ul class="uk-slideshow-items">
                  <li>
                      <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  </li>
                  <li>
                      <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  </li>
                  <li>
                      <img src="/demo/img/light.jpg" alt="" uk-cover>
                  </li>
              </ul>
              <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
              <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
          </div>
          <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
      </div>
    Примечание Для лучшей видимости навигации на темных или светлых изображениях добавьте класс .uk-light или .uk-dark из компонента Инверсия.

    Видео

    Слайд-шоу не ограничивается изображениями. Другие медиафайлы, например видео, можно размещать на заднем плане каждого слайда, используя атрибут uk-cover компонента Cover. Видео отключается и воспроизводится автоматически. Видео будет приостановлено, когда оно не видно, и возобновится, как только оно снова станет видимым.

    <div uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <video src="" autoplay loop muted playsinline uk-cover></video>
            </li>
            <li>
                <iframe src="" frameborder="0" uk-cover></iframe>
            </li>
        </ul>
    </div>
    
    • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
          <ul class="uk-slideshow-items">
              <li>
                  <img src="/demo/img/photo.jpg" alt="" uk-cover>
              </li>
              <li>
                  <video src="/demo/video/big_buck_bunny.mp4" autoplay loop muted playsinline uk-cover></video>
              </li>
              <li>
                  <iframe src="https://www.youtube-nocookie.com/embed/SkVqJ1SGeL0?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&wmode=transparent&playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
              </li>
          </ul>
          <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
      </div>

    Эффект «Ken Burns»

    Чтобы добавить эффект Кена Бернса, оберните изображение в элемент div добавив классы .uk-position-cover и .uk-animation-kenburns. Вы также можете применить .uk-animation-reverse или один из классов .uk-transform-origin-* из компонента Utility, чтобы изменить эффект.

    <div uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                    <img src="" alt="" uk-cover>
                </div>
            </li>
        </ul>
    </div>
    
    • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
          <ul class="uk-slideshow-items">
              <li>
                  <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                      <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  </div>
              </li>
              <li>
                  <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
                      <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  </div>
              </li>
              <li>
                  <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
                      <img src="/demo/img/light.jpg" alt="" uk-cover>
                  </div>
              </li>
          </ul>
          <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
      </div>

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

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

    <div uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <img src="" alt="" uk-cover>
                <div class="uk-position-center uk-position-small">
    
                    <!-- Здесь находится контент -->
    
                </div>
            </li>
        </ul>
    </div>
    
    Примечание Чтобы адаптировать контент для лучшей видимости каждого изображения, добавьте класс .uk-light или .uk-dark из компонента Инверсия или используйте Оверлей, чтобы отобразить содержимое в соответствующем месте и виде.
      • Center

        Я не просто учусь на своих ошибках...
        Я, блин, постоянно повторяю пройденный материал!

      • Bottom

        Вежливость - это не только послать, но и проводить.

      • Overlay Bottom

        Ждать, когда соберется жена, - как скачивать что-то из интернета:
        осталось 2 минуты, осталась 1 минута... Осталось 17 минут.

      • Overlay Bottom Right

        Если вы не материтесь за рулем, значит, вы не следите за дорогой.

    • <div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">
          <ul class="uk-slideshow-items">
              <li>
                  <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-center uk-position-small uk-text-center ">
                      <h2 class="uk-margin-remove">Center</h2>
                      <p class="uk-margin-remove">Я не просто учусь на своих ошибках...<br> Я, блин, постоянно повторяю пройденный материал!</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  <div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
                      <h3 class="uk-margin-remove">Bottom</h3>
                      <p class="uk-margin-remove">Вежливость - это не только послать, но и проводить.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/light.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
                      <h3 class="uk-margin-remove">Overlay Bottom</h3>
                      <p class="uk-margin-remove">Ждать, когда соберется жена, - как скачивать что-то из интернета:<br> осталось 2 минуты, осталась 1 минута... Осталось 17 минут.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
                      <h3 class="uk-margin-remove">Overlay Bottom Right</h3>
                      <p class="uk-margin-remove">Если вы не материтесь за рулем, значит, вы не следите за дорогой.</p>
                  </div>
              </li>
          </ul>
          <div class="uk-light">
              <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
              <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
          </div>
      </div>

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

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

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

    <div uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <img src="" alt="" uk-cover>
                <div class="uk-position-center uk-position-small">
    
                    <div uk-slideshow-parallax="x: 100,-100">
    
                        <!-- Контент расположен здесь -->
    
                    </div>
    
                </div>
            </li>
        </ul>
    </div>
    

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

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

    начало - анимация стартует и прибывает к центру;
    середина - центрируется, содержимое на месте;
    конец - отправляется с анимацией в свой путь, до скорых встреч!

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

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

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

        Ничего не просит и вежливо отказывается.

      • Движение

        Ох и не полюбила его хозяйка!

      • Скольжение

        Забренчала и натянулась золотым лучом.

    • <div class="uk-position-relative uk-light uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">
          <ul class="uk-slideshow-items">
              <li>
                  <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  <div class="uk-position-center uk-position-small uk-text-center">
                      <h2 uk-slideshow-parallax="x: 100,-100">Параллакс</h2>
                      <p uk-slideshow-parallax="x: 200,-200">Ничего не просит и вежливо отказывается.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
                      <h2 uk-slideshow-parallax="x: 100,-100">Движение</h2>
                      <p uk-slideshow-parallax="x: 200,-200">Ох и не полюбила его хозяйка!</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/light.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-center uk-text-center">
                      <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Скольжение</h2>
                      <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Забренчала и натянулась золотым лучом.</p>
                  </div>
              </li>
          </ul>
          <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
      </div>

    Расширенные эффекты

    Параллакс-атрибут можно использовать для добавления дополнительных эффектов к анимации слайд-шоу. В следующем примере анимация push расширяет свои возможности за счет затемнения и уменьшения изображения при его скольжении.

    <div uk-slideshow="animation: push">
        <ul class="uk-slideshow-items">
            <li>
                <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                    <img src="" alt="" uk-cover>
                </div>
                <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            </li>
        </ul>
    </div>
    
      • Эффект

        Нить судьбы пока еще на берегу.

      • Скольжение

        Зажёг нестерпимым золотом бечеву.

      • Анимация

        Шаг навстречу своей судьбе.

    • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
          <ul class="uk-slideshow-items">
              <li>
                  <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                      <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  </div>
                  <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
                  <div class="uk-position-center uk-position-medium uk-text-center">
                      <div uk-slideshow-parallax="scale: 1,1,0.8">
                          <h4 class="uk-h2" uk-slideshow-parallax="x: 200,0,0">Эффект</h4>
                          <p uk-slideshow-parallax="x: 400,0,0;">Нить судьбы пока еще на берегу.</p>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                      <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  </div>
                  <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
                  <div class="uk-position-center uk-position-medium uk-text-center">
                      <div uk-slideshow-parallax="scale: 1,1,0.8">
                          <h4 class="uk-h2" uk-slideshow-parallax="x: 200,0,0">Скольжение</h4>
                          <p uk-slideshow-parallax="x: 400,0,0;">Зажёг нестерпимым золотом бечеву.</p>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                      <img src="/demo/img/light.jpg" alt="" uk-cover>
                  </div>
                  <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
                  <div class="uk-overlay uk-overlay-primary uk-position-center uk-text-center">
                      <div uk-slideshow-parallax="scale: 1,1,0.8">
                          <h4 class="uk-h3" uk-slideshow-parallax="x: 200,0,0">Анимация</h4>
                          <p uk-slideshow-parallax="x: 400,0,0;">Шаг навстречу своей судьбе.</p>
                      </div>
                  </div>
              </li>
          </ul>
          <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
      </div>

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

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

    <div uk-slideshow>
        <ul class="uk-slideshow-items">
            <li>
                <img src="" alt="" uk-cover>
                <div class="uk-position-bottom uk-position-small">
    
                    <div class="uk-transition-slide-bottom">
    
                        <!-- Здесь расположен контент -->
    
                    </div>
    
                </div>
            </li>
        </ul>
    </div>
    

    Вместе с компонентом Overlay контент-переходы отображаются в виде классического описания в слайд-шоу.

      • Bottom

        Великолепные рыцари прагали на мешках с золотом.

      • Bottom

        Богатства царевича были доставлены в его квартиру.

      • Left

        Давно мечтал о просторной собственной скамейке.

    • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
          <ul class="uk-slideshow-items">
              <li>
                  <img src="/demo/img/photo.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                      <h3 class="uk-margin-remove">Bottom</h3>
                      <p class="uk-margin-remove">Великолепные рыцари прагали на мешках с золотом.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                      <h3 class="uk-margin-remove">Bottom</h3>
                      <p class="uk-margin-remove">Богатства царевича были доставлены в его квартиру.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/light.jpg" alt="" uk-cover>
                  <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                      <h3 class="uk-margin-remove">Left</h3>
                      <p class="uk-margin-remove">Давно мечтал о просторной собственной скамейке.</p>
                  </div>
              </li>
          </ul>
          <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
      </div>

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

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

    Slideshow

    Опция Значение По умолчанию Описание
    animation String slide Режим анимации слайд-шоу: slide, fade, scale, pull или push.
    autoplay Boolean false Автозапуск слайд-шоу.
    autoplay-interval Number 7000 Задержка между переключением слайдов в режиме автозапуска.
    draggable Boolean true Включить перетаскивание.
    easing String ease Плавность анимации. (CSS timing functions or cubic-bezier).
    finite Boolean false Отключить бесконечную прокрутку/ скольжение.
    pause-on-hover Boolean true Приостановить при наведении.
    index Number 0 Элемент слайд-шоу для отображения.
    Индекс начинается с 0.
    velocity Number 1 Скорость анимации (пиксель / мс).
    ratio Boolean, String 16:9 Соотношение. (false предотвращает регулировку высоты).
    min-height Boolean, Number false Минимальная высота.
    max-height Boolean, Number false Максимальная высота.

    JavaScript

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

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

    UIkit.slideshow(element, options);
    

    События

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

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

    Методы

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

    Show

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

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

    startAutoplay

    UIkit.slideshow(element).startAutoplay();
    

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

    stopAutoplay

    UIkit.slideshow(element).stopAutoplay();
    

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

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