Lego2012
9/26/2016 - 10:20 PM

Slideshow with Caption and Effects

Slideshow with Caption and Effects

.my-slider
  .uk-slidenav-position(data-uk-slideshow="{autoplay: true, animation: 'random-fx'}")
    ul.uk-slideshow
      li
        img(src='https://uikitplay.com/assets/img/placeholder_800x400_1.jpg', width='', height='', alt='')
        .uk-overlay-panel.uk-overlay-background.uk-overlay-bottom
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      li
        img(src='https://uikitplay.com/assets/img/placeholder_800x400_2.jpg', width='', height='', alt='')
        .uk-overlay-panel.uk-overlay-background.uk-overlay-bottom
          | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      li
        img(src='https://uikitplay.com/assets/img/placeholder_800x400_3.jpg', width='', height='', alt='')
        .uk-overlay-panel.uk-overlay-background.uk-overlay-bottom
          | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    a.uk-slidenav.uk-slidenav-contrast.uk-slidenav-previous(href='', data-uk-slideshow-item='previous')
    a.uk-slidenav.uk-slidenav-contrast.uk-slidenav-next(href='', data-uk-slideshow-item='next')
.my-slider {
 max-width: 800px;
   margin: 0 auto;
}