Слайд-шоу

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

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

В раздлеле примеры UIkit 3 представлены все варианты работы компоннета Слайд-шоу.

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

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

Добавьте изображение на заднем плане каждого слайда, используя атрибут uk-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" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/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>

Внимание Для активации ленивой загрузки изображений используйте компонент Изображения.

Анимации

По умолчанию в слайд-шоу используется анимация 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" uk-slideshow>

            <ul class="uk-slideshow-items">
                <li>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/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" uk-slideshow="animation: fade">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/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" uk-slideshow="animation: scale">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/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" uk-slideshow="animation: pull">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/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" uk-slideshow="animation: push">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="images/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>

Соотношение сторон

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

<div uk-slideshow="ratio: 7:3">...</div>

  • <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="ratio: 7:3; animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/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" uk-slideshow="min-height: 300; max-height: 600; animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/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>

Высота области просмотра

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

<div uk-slideshow>
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</ul>
</div>

  • <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow>

    <ul class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/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>. Это очень удобно при использованиии Точечной навигации.

<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">

        <ul class="uk-slideshow-items">
            <li>
                <img src="images/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="images/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="images/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 из компонента Обложка. Видеоролики отключаются и воспроизводятся автоматически. Видео будет приостановлено, когда оно скрыто, и возобновится, как только оно снова станет видимым.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <video src="" autoplay loop muted playslinline 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" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <video autoplay loop muted playslinline uk-cover>
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
                <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
            </video>
        </li>
        <li>
            <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="560" height="315" 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>

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

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

<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" 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="images/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="images/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="images/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">

                <!-- The content goes here -->

            </div>
        </li>
    </ul>
</div>

Внимание Чтобы адаптировать контент для улучшения видимости на каждом изображении, добавьте классы .uk-light или .uk-dark из компонента Инверкия или используйте Наложения.

    • По центру

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Снизу

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Наложение снизу

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Снизу справа

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center uk-light">
                <h2 class="uk-margin-remove">Center</h2>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet.</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, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, задав два значения через запятую.

Эта функциональность унаследована от компонента Параллакс, и позволяет анимировать свойства 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. Это работает, потому что начальные и конечные значения имеют одинаковое расстояние. Для разных расстояний необходимы три значения: Start (начало анимации слайда), Middle (слайд центрирован), End (слайд исчезает).

<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>

    • Заголовок

      Lorem ipsum dolor sit amet.

    • Заголовок

      Lorem ipsum dolor sit amet.

    • Заголовок

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="images/dark.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">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small 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">Lorem ipsum dolor sit amet.</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>

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

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

    • Заголовок

      Lorem ipsum dolor sit amet.

    • Заголовок

      Lorem ipsum dolor sit amet.

    • Заголовок

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle uk-light" 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="images/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">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/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">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/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-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</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">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>

Вместе с компонентом Наложение, переходы контента используются для создания классической подписи к слайд-шоу.

    • Заголовок

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Заголовок

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Слева

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="animation: fade">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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 or push.
autoplay Boolean false Автопрокрутка.
autoplay-interval Number 7000 Задержка между переключением слайдов в режиме автопрокрутки.
draggable Boolean true Включение перетаскивания слайдов.
finite Boolean false Отключение бесконечной прокрутки.
pause-on-hover Boolean true Останавливать воспроизведение при наведении.
index Number 0 Номер элемента в наборе. Начинается с 0.
velocity Number 1 Скорость анимации (pixel/ms).
ratio Boolean, String 16:9 Соотношение сторон. (false отменяет регулировку высоты)
min-height Boolean, Number false Минимальная высота.
max-height Boolean, Number false Максимальная высота.

JavaScript

Подробнее о JavaScript компонентах.

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

UIkit.slideshow(element, options);

Events

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

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

Methods

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

Show

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

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

startAutoplay

UIkit.slideshow(element).startAutoplay();

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

stopAutoplay

UIkit.slideshow(element).stopAutoplay();

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