Слайд-шоу

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

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

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

Пример

Примечание, чтобы активировать автозапуск, просто добавьте {autoplay:true} параметр для атрибута данных.

Разметки

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
    <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

Гибкость слайд-шоу компонент позволяет вам использовать любой другой UIkit компоненты для навигации по пунктам. Например 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>

Переходы

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

Класс Описание
fade Этот пункт исчезает.
scroll Предметы в свиток.
scale Детали масштабирования на выход.
swipe Предметы проведите.

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

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

Пример

  • Свиток

  • Масштаб

  • Салфетки

  • Ломтик Вниз

  • Нарезать

  • Ломтик Вверх Вниз

  • Фолд

  • Головоломки

  • Коробки

  • Коробки Реверса

Разметки

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

Эффект Кена Бернса

Эффект Кена Бернса, может также применяться в слайд-шоу элементы. Просто добавить {kenburns:true} опция для данных атрибутов. Этот эффект также может быть применен к видео.

Пример

Разметки

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

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

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

Разметки

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

Накладки

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

Пример

  • Наложение

    Компания Ipsum боль сидеть амет, consetetur sadipscing elitr,
    СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam.

  • Наложение Верхней

    Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam.

  • Наложение Дно

    Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam.

  • Наложение Левой

    Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam.

  • Право Наложения

    Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam.

Разметки

<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 позволяет представить оба видео-элементов и фреймов в слайд-шоу.

Пример

Разметки

<!-- This is a slideshow with a video element -->
<ul class="uk-slideshow">
    <li>
        <video width="" height="" autoplay loop muted controls>
            <source src="" type="">
        </video>
    </li>
</ul>

<!-- This is a slideshow with an Iframe -->
<ul class="uk-slideshow">
    <li>
        <iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

Содержание

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

Пример

  • Заголовок 1

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Заголовок 2

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


Инициализации элементов вручную

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

JavaScript варианты

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

События

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