Компонент Слайд-шоу : 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 для использования другой анимации. Возможны следующие значения:

Animation Description
slide Slides slide in side by side.
fade Slides fade in.
scale Slides are scaled up and fade out.
pull Slides are pulled from the deck.
push Slides are pushed to the deck.
<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»

The slideshow always takes up the full width of its parent container. The height adapts according to the defined ratio. To change the default ratio of 16:9, just add the ratio option to the attribute. It's recommended to use the same ratio as the background images. For example, just use their width and height, like 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>

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

By default, the slideshow height adopts to the defined ratio. A minimum or maximum height can be set using the min-height and max-height options.

<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

Adding the uk-height-viewport attribute from the Height component to the list of slideshow items will stretch the height to fill the whole viewport. You can set the min-height option to define a minimum 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>
Примечание This example is set to 70% of the viewport height.

To navigate through your slides, just use the uk-slideshow-item attribute. To target the slides, set the attribute of every nav item to the index number of the respective slideshow item. The elements with the uk-slideshow-item attribute need to be inside the uk-slideshow container. Setting the attribute to next and previous will switch to the adjacent slides.

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

The flexibility of the Slideshow component allows you to use any of the other UIkit components to navigate through items. For example the Slidenav, Dotnav and Thumbnav components can be used to style the slideshow navigations.

If there is no item specific content in the navigation items, you can also add the .uk-slideshow-nav class instead of adding navigation items manually. It will generate its items automatically using <li><a href="#"></a></li> as markup. This is a useful shortcut when using the 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>
    Примечание For better visibility of overlaying navigations, add the .uk-light or .uk-dark class from the Inverse component.

    Видео

    Слайд-шоу не ограничивается изображениями. Другие медиафайлы, например видео, можно размещать на заднем плане каждого слайда, используя атрибут 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»

    To add a simple Ken Burns effect, wrap the image with a div and add the .uk-position-cover and .uk-animation-kenburns classes. You can also apply the .uk-animation-reverse or one of the .uk-transform-origin-* classes from the Utility component to modify the effect.

    <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">
    
                    <!-- The content goes here -->
    
                </div>
            </li>
        </ul>
    </div>
    
    Примечание To adapt your content for better visibility on each image, add the .uk-light or .uk-dark class from the Inverse component or use the Overlay to add any style to the overlay box.
      • Center

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      • Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      • Overlay Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      • Overlay Bottom Right

        Lorem ipsum dolor sit amet.

    • <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-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="/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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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">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>

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

    Add the uk-slideshow-parallax attribute to any element inside the slides to animate it together with the slideshow animation. Add an option with the desired animation values for each CSS property you want to animate. Define at least one start and end value. It can be done by passing two values separated by a comma.

    This functionality is inherited from the Parallax component, and it allows to animate CSS properties depending on the scroll position of the slideshow animation. Take a look at the possible properties that can be animated.

    <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">
    
                        <!-- The content goes here -->
    
                    </div>
    
                </div>
            </li>
        </ul>
    </div>
    

    In the example above, the content will start at 100 and animate half way to 0 while the slide moves in. When the slide starts again to move out, the content will continue to animate to -100. This works because the start and end values have the same distance. For different distances, three values are needed: Start (Slide animates in), Middle (Slide is centered), End (Slide animates out).

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

    The next example defines different in and out animations. The content slides in by moving from 100 to 0 and fades out from 1 to 0.

    <div uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">...</div>
    
      • Heading

        Lorem ipsum dolor sit amet.

      • Heading

        Lorem ipsum dolor sit amet.

      • Heading

        Lorem ipsum dolor sit amet.

    • <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>
                  <div class="uk-position-center uk-position-small uk-text-center">
                      <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                      <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/dark.jpg" alt="" uk-cover>
                  <div class="uk-position-center uk-position-small uk-text-center">
                      <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                      <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                  </div>
              </li>
              <li>
                  <img src="/demo/img/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">Heading</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>

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

    The parallax attribute can be used to add additional effects to the slideshow animations. In the following example the push animation is extended by dimming out and scaling down the image when it's sliding out.

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

        Lorem ipsum dolor sit amet.

      • Heading

        Lorem ipsum dolor sit amet.

      • Heading

        Lorem ipsum dolor sit amet.

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

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

    Transition classes from the Transition component are triggered automatically inside slides. Contrary to the parallax effect, transitions are not attached to the slideshow animation and start playing independently after the slideshow animation.

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

    Together with the Overlay component, content transitions are used to build a classic caption for the slideshow.

      • Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      • Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      • Left

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • <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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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">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 Slideshow animation mode: slide, fade, scale, pull or push.
    autoplay Boolean false Slideshow autoplays.
    autoplay-interval Number 7000 The delay between switching slides in autoplay mode.
    draggable Boolean true Enable pointer dragging.
    easing String ease The animation easing (CSS timing functions or cubic-bezier).
    finite Boolean false Disable infinite sliding.
    pause-on-hover Boolean true Pause autoplay mode on hover.
    index Number 0 Slideshow item to show. 0 based index.
    velocity Number 1 The animation velocity (pixel/ms).
    ratio Boolean, String 16:9 The ratio. (false prevents height adjustment)
    min-height Boolean, Number false The minimum height.
    max-height Boolean, Number false The maximum height.

    JavaScript

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

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

    UIkit.slideshow(element, options);
    

    События

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

    Название Описание
    beforeitemshow Fires before an item is shown.
    itemshow Fires after an item is shown.
    itemshown Fires after an item's show animation has completed.
    beforeitemhide Fires before an item is hidden.
    itemhide Fires after an item's hide animation has started.
    itemhidden Fires after an item's hide animation has completed.

    Методы

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

    Show

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

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

    startAutoplay

    UIkit.slideshow(element).startAutoplay();
    

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

    stopAutoplay

    UIkit.slideshow(element).stopAutoplay();
    

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

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