Слайд-шоу

• Создание слайд-шоу
• Навигации по слайдам
• Slidenav и Dotnav
• Анимационные переходы
• Эффект «Ken Burns»
• Полноэкранное слайд-шоу
• Overlays
• Видео
• Контент
• JavaScript Options

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

Чтобы создать слайд-шоу, просто добавьте класс .uk-slideshow к элементу <ul> и поместите ваши изображения в элементы списка. Чтобы загрузить необходимый JavaScript, вам также необходимо добавить атрибут data-uk-slideshow.

Пример

Заметка Чтобы активировать автозапуск слайд-шоу, просто добавьте в data-* атрибут параметр {autoplay:true}.

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
    <li><img src="" width="" height="" alt=""></li>
    <li><img src="" width="" height="" alt=""></li>
</ul>

Навигация

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

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li data-uk-slideshow-item="0"><a href="">...</a></li>
        <li data-uk-slideshow-item="1"><a href="">...</a></li>
    </ul>
</div>

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

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" data-uk-slideshow-item="previous"></a>
    <a href="" data-uk-slideshow-item="next"></a>
</div>

Slidenav и Dotnav

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

Пример

<div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
    </ul>
</div>

Анимационные переходы

Компонент «Slideshow» позволяет добавлять различные анимации к элементам при переключении между ними. Все, что вам нужно сделать, это добавить параметр animation в data-* атрибут и указать анимацию, которую вы хотите применить. Ознакомьтесь с таблицей ниже для обзора предоставленных анимаций.

Чтобы применить более сложные переходы, файл slideshow-fx.js должен быть включен в заголовок документа.

Пример

• • 
  • 
  • 

  Scroll

• • 
  • 
  • 

  Scale

• • 
  • 
  • 

  Swipe

• • 
  • 
  • 

  Slice Down

• • 
  • 
  • 

  Slice Up

• • 
  • 
  • 

  Slice Up Down

• • 
  • 
  • 

  Fold

• • 
  • 
  • 

  Puzzle

• • 
  • 
  • 

  Boxes

• • 
  • 
  • 

  Boxes Reverse

<ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">
    ...
</ul>

Эффект «Ken Burns»

Эффект «Ken Burns» также можно применять к элементам слайд-шоу. Просто добавьте к data-* атрибуту опцию {kenburns:true}. Этот эффект также может быть применен к видео.

Пример

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">
    ...
</ul>

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">
    ...
</ul>

Полноэкранное слайд-шоу

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

<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>
    ...
</ul>

Overlays

Вы также можете улучшить слайд-шоу с различными наложениями. Просто добавьте .uk-overlay-panel в элемент <div> внутри списка элементов. Также добавьте .uk-overlay-background и .uk-overlay-fade, чтобы показать фон и переход. Чтобы переключить наложение, как только слайд станет активным, добавьте .uk-overlay-active в список контйнера. Можно примененять дополнительные параметры из компонента Overlay.

Пример

<ul class="uk-slideshow uk-overlay-active" data-uk-slideshow>
    <li>
        <img src="" width="" height="" alt="">
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">
            ...
        </div>
    </li>
</ul>

Видео

UIkit 2 позволяет вам устанавливать видео элементы и Iframes в слайд-шоу.

Пример

<!-- Это слайд-шоу с элементом видео -->
<ul class="uk-slideshow">
    <li>
        <video width="" height="" autoplay loop muted controls>
            <source src="" type="">
        </video>
    </li>
</ul>

<!-- Это слайд-шоу с Iframe -->
<ul class="uk-slideshow">
    <li>
        <iframe src="" width="" height="" allowfullscreen></iframe>
    </li>
</ul>

Контент

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

Пример

Запуск элемента вручную

var slideshow = UIkit.slideshow(element, { /* options */ });

JavaScript Options

События