Using Metafizzy Flickity Slider with ProcessWire

[EyeDentify]

Hello again. Thought i share my way of creating sliders in my ProcessWire websites, by using the images field type and some HTML, JavaScript, CSS and a pinch of love.

Step One:
 

Go to http://flickity.metafizzy.co/ and download Flickity slider. They also have a CDN option for thoose who prefere that.

Also have the page handy cause it has alot of usefull info for configuring the slider and such.

Note: In my example i use jQuery to initialize Flickity but you can use it without, see the website for more info.
So you need to load jQuery before flickity in the header section for my example to work.

 

Step Two:

Here is an example of how you could write some code and HTML for your template file where the slider should render.

This code assumes your images field is named images.

 

<div class="slider-container">
                    
    <?PHP
    /* check if there is any images to display */
    if(count($page->images) > 0) {
        
        /* render out the images and resize to 700 pixel width */
        foreach($page->images AS $key => $image) {
            
            echo('<img src="' . $image->width(700)->url . '" class="slider-container-item" alt="' . $image->description . '">');

        }

    } else {
    
        echo('<p>Houston we have a problem...there are no images to see here...</p>');
        
    }
    ?>

</div>

Also lets put together some simple CSS for our container and items. Alter it to your own needs and preference.

For the Flickitys sliders default CSS and configuring see the website.

.slider-container {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    padding: 0;
    margin-bottom: 15px;
    clear: both;
}
.slider-container-item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 700px;
}

Step Three:

Put the default CSS and also Flickitys JS files and load jQuery before Flickity in the header of your site so that flickity works as intended.

Or use the CDN option mentioned on the flickity website.

 

<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/flickity.pkgd.min.js"></script>

Don´t forget to put the Flickity JavaScript initalization code at the bottom of the template file.

For all the Options and configuration see the website: http://flickity.metafizzy.co/

 

In the example code below i use just a few of the many options.

 

<script type="text/javascript">

/* initiate Flickity Slider JS */
$(document).ready(function(e){

    $('.slider-container').flickity({
        // options
        cellSelector: '.slider-container-item',
        cellAlign: 'center',
        imagesLoaded: true,
        percentPosition: true,
        contain: true
    });

});
</script>

Note:

This is my prefered way of doing it. But there are alternative ways to initialize Flickity if you read the info on the website.

 

This should be enough to get you started. And with a little imagination i think you could see the potential.

Good luck with all your Slider making dreams

[kongondo]

Thanks for this.

It's probably good to also point out that Flickity may require the purchase of a license depending on the project.

[EyeDentify]

Thanks for this.

It's probably good to also point out that Flickity may require the purchase of a license depending on the project.

Thanks for reminding me.

One could read about the various licenses here:

http://flickity.metafizzy.co/#license

[Macrura]

sorry if this sounds nitpicky, but i've never seen all caps for php tag (<?PHP) (?)

[EyeDentify]

sorry if this sounds nitpicky, but i've never seen all caps for php tag (<?PHP) (?)

Well thats my way of coding it's a mather of preference i guess.

[Juergen]

I often use jsdelivr as free javascript CDN. They also offer the files for this slider on their CDN at

https://www.jsdelivr.com/projects/flickity

Only for those who are interested in. Advantage: you can combine multiple js files from this CDN into one - so only one request will be made

Best regards