Слайд-шоу : Slideshow

Создайте адаптивное слайд-шоу с изображениями или видео, с потрясающими эффектами перехода, полноэкранным режимом и наложениями.

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

Чтобы создать слайд-шоу, просто добавьте класс .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. Чтобы нацелить слайды, вам нужно установить атрибут данных каждого элемента навигации равным номеру соответствующего элемента слайд-шоу.

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

Разметка

<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-* атрибут и указать анимацию, которую вы хотите применить. Ознакомьтесь с таблицей ниже для обзора предоставленных анимаций.

Класс Описание
fade Эффект плавного появления/исчезновения.
scroll Анимация - эффект «scroll» - прокручиваются.
scale Анимация - эффект «scale» - увеличиваются в размерах исчезая.
swipe Анимация - эффект «swipe» - смахиваются в сторону.

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

Класс Описание
slice-down Эффект «slice-down» - элементы скатываются кусочками.
slice-up Эффект «slice-up» - элементы скользят кусочками.
slice-up-down Эффект «slice-up-down» - нарезанные элементы скользят в разных направлениях.
fold Эффект «fold» - нарезанные элементы складываются.
puzzle Эффект «puzzle» - элементы разделены на квадраты, которые случайно появляются.
boxes Эффект «boxes» - элементы разделены на квадраты, плавное масштабирование по диагонали от верхнего левого угла.
boxes-reverse Эффект «boxes-reverse» - элементы разделены на квадраты, плавное масштабирование по диагонали от нижнего правого угла.
random-fx Эффект «random-fx» - различные анимации применяются в случайном порядке.

Примеры

    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.

Пример

  • Overlay

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

  • Overlay Top

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

  • Overlay Bottom

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

  • Overlay Left

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

  • Overlay Right

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

Разметка

<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="" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

Контент

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

Пример

  • Заголовок 1

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

  • Заголовок 2

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


Init element manually

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

JavaScript Options

Option Default Описание
animation 'fade' Устанавливает предпочтительный переход между элементами.
duration 500 Устанавливает продолжительность перехода.
height 'auto' Устанавливает высоту слайд-шоу.
start 0 Устанавливает первый элемент слайд-шоу для отображения.
autoplay false Устанавливает, должны ли элементы слайд-шоу переключаться автоматически.
pauseOnHover true Приостановить движение слайдов при наведении на слайд-шоу.
autoplayInterval 7000 Устанавливает временной интервал между переключением элементов слайд-шоу.
videoautoplay true Устанавливает, начинать ли видео автоматически.
videomute true Устанавливает, отключено или нет в видео muted.
kenburns false Устанавливает, активен ли эффект Кена Бернса. Если kenburns это числовое значение, оно будет использоваться как продолжительность анимации.
kenburnsanimations 'uk-animation-middle-left',
'uk-animation-top-right',
'uk-animation-bottom-left',
'uk-animation-top-center',
'uk-animation-bottom-right'
Animation series.
slices 15 Устанавливает количество срезов, если установлен переход "Slice".

Events

Name Parameter Описание
show.uk.slideshow event, next slide, current slide При показе нового слайда (после завершения анимации)
beforeshow.uk.slideshow event, next slide, current slide Перед показом нового слайда (до окончания анимации)