UIkit 3 Based Slideshow With Driven Listings Extension

Veröffentlicht in Pagekit

This blog post is a follower for my previous entry about how to make a fancy slideshow with driven listings extension for Pagekit CMS. For UIKit v2 based themes / templates we had already a pretty nice and easy to use solution. Well however the actual pagekit template I use on this domain is based on UIKit v3 so it wasn’t working anymore as the syntax has changed slightly.

For someone who is working with pagekit and want to customize some visuals or whatever, I would like highly to recommend to try out an extension called Assets from Roman aka spqr.wtf. This beauty can be a life saver as for most cases it allows you to extend or change visuals as functional elements on your pagekit based website.

You can get as usual on pagekit marketplace and installation should never be a problem like with all extensions made by spqe.wtf.

Well here is the short and painless tutorial:

Create 3 new css assets with following content and publish it:

slideshow-mod:

.driven-slideshow-dotnav .uk-dotnav > > { width: 20pt; height: 20pt; background-color: rgba(236,72,59,0.9); } @media (max-width:768px) { .driven-slideshow-dotnav .uk-dotnav > > { width: 10pt; height: 10pt; background-color: rgba(236,72,59,0.9); } }

slideshow-title:


.fade-in-animation {
    animation-delay: 0.5s;
    -webkit-animation-name:uk-fade;
    animation-name:uk-fade;
    -webkit-animation-duration:2s;
    animation-duration:2s;
    -webkit-animation-timing-function:ease-in !important;
    animation-timing-function:ease-in !important;
}
.fade-out-animation {
    animation-duration:8s;
    -webkit-animation-direction:reverse;
    animation-direction:reverse;
    -webkit-animation-timing-function:ease-out !important;
    animation-timing-function:ease-out !important;
}
@media (min-width:320px) and (max-width:640px) {
    .slideshow-title-panel {
        margin-bottom: 15pt;
        margin-right: 15pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 12pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 5px;
        padding-left: 5px;
        text-align: center;
        line-height: 18pt;
    }
}
@media (min-width:665px) and (max-width:765px) {
    .slideshow-title-panel {
        margin-bottom: 15pt;
        margin-right: 15pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 20pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 26pt;
    }
}
@media (min-width:768px) and (max-width:1024px) {
    .slideshow-title-panel {
        margin-bottom: 10pt;
        margin-right: 10pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 20pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 26pt;
    }
}
@media (min-width:1024px) {
    .slideshow-title-panel {
        margin-bottom: 40pt;
        margin-right: 40pt;
    }
    .slideshow-title {
        color: #fff;
        font-size: 40pt;
        background: #ec483b;
        border: 2px solid white;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        line-height: 46pt;
        text-transform: uppercase;
    }
}

slidenav-mod:


.driven-slideshow-dotnav .uk-dotnav >  >  {
    width: 20pt;
    height: 20pt;
    background-color: rgba(236,72,59,0.9);
}
@media (max-width:768px) {
    .driven-slideshow-dotnav .uk-dotnav >  >  {
    width: 10pt;
    height: 10pt;
    background-color: rgba(236,72,59,0.9);
    }
}

Last but not least create a new template in the driven listings extension -> Templates. SlideshowUIKitv3:


<div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="autoplay:true; pause-on-hover: false">
  <ul class="uk-slideshow-items" v-for="category in list.categories">
  <li v-for="item in category.items">
  <img class="uk-width-1-1" width="100%" height="auto" :src="$url(item.image)" alt="" uk-cover>
  <div class="slideshow-title-panel uk-overlay-panel uk-overlay-right uk-position-bottom uk-flex uk-flex-bottom uk-flex-right uk-text-right uk-animation-fade fade-in-animation">
            <h2 class="slideshow-title uk-text-right uk-animation-fade fade-out-animation">{{ item.title }}</h2>
        </div>
    </li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large uk-slidenav-contrast uk-slidenav-previous" href="#" uk-slidenav-previous uk-slideshow-item="previous"  style="color: rgba(236,72,59,0.9)"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large uk-slidenav-contrast uk-slidenav-next" href="#" uk-slidenav-next uk-slideshow-item="next" style="color: rgba(236,72,59,0.9)"></a>
<div class="driven-slideshow-dotnav uk-position-bottom-center uk-position-small">
    <ul class="uk-dotnav" v-for="category in list.categories">
        <li v-for="item in category.items" uk-slideshow-item="{{ item.description }}"><a href="#"  style="color: rgba(236,72,59,0.9)">Item {{ item.description }}</a></li>
    </ul>
</div>
</div>

Well that’s almost it, now we can create awesome slideshows with driven, just create a new listing, choose the template you just created and put some image items, with a title and attention with a number in the description starting from 0. This will be used to generate nice slidenav buttons in the bottom of the slideshow.

Driven item

Just publish your new listing collection If you put some items into your fancy slideshow.

Driven items

Grab your shortcode for the slideshow and put it somewhere you would like to have it. It can be a module, a blog post etc. etc.

Shortcode

That’s it folks have fun with creating slideshows and here is the example result of all the “hard work”:

Made with love and coffeine, driven by emotions