Form2Content Image Gallery with YOOtheme's UIkit

Form2Content Image Gallery with YOOtheme's UIkit

<div class="uk-panel uk-panel-box motor-slideshow" data-uk-slideshow="{ldelim}autoplay: true{rdelim}">
    <ul class="slideshow uk-slideshow">
        {foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE}
            <li>
                <a class="uk-overlay uk-overlay-hover" data-uk-lightbox="{ldelim}group:'motorfiets'{rdelim}" href="{$IMAGE_GALLERY_URL_RELATIVE}/{$IMAGE.FILENAME}">
                    <img src="{$IMAGE_GALLERY_URL_RELATIVE}/{$IMAGE.FILENAME}" />
                    <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
                </a>
            </li>
        {/foreach}
    </ul>

    <div class="slidenav uk-slidenav-position">
        <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
        <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a>

        <ul class="uk-dotnav uk-position-bottom uk-flex-center">
            {foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE name=GALLERY}
                <li data-uk-slideshow-item="{$smarty.foreach.GALLERY.index}"><a href="#"></a></li>
            {/foreach}
        </ul>
    </div>

    <ul class="thumbnav uk-thumbnav">
        {foreach from=$IMAGE_GALLERY_IMAGES item=IMAGE name=GALLERY}
            <li class="uk-width-1-4" data-uk-slideshow-item="{$smarty.foreach.GALLERY.index}"><a href="#"><img src="{$IMAGE_GALLERY_URL_RELATIVE}/thumbs/{$IMAGE.FILENAME}" /></a></li>
        {/foreach}
    </ul>
</div>

<style type="text/css">
  .motor-slideshow .slidenav .uk-slidenav {
    width: 20px;
    height: auto;
    line-height: 1;
    font-size: 30px;
    display: block;
    margin-top: -10px;
  }

  .motor-slideshow .slidenav.uk-slidenav-position .uk-slidenav-previous {
    left: 10px;
  }

  .motor-slideshow .slidenav.uk-slidenav-position .uk-slidenav-next {
    right: 10px;
  }

  .motor-slideshow [class*="uk-position-bottom"] {
    position: relative !important;
  }

  .motor-slideshow .uk-dotnav {
    margin-top: 0;
    margin-bottom: 0;
  }

  .motor-slideshow .uk-overlay-icon::before {
    content: "\f002";
    font-family: "FontAwesome";
  }

  .motor-slideshow .thumbnav {
    margin-top: 0;
  }

  .motor-slideshow .uk-thumbnav > * > * {
    background: transparent;
  }
</style>