Jump to content

Using Metafizzy Flickity Slider with ProcessWire

Recommended Posts

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">
    /* 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>');

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

        // options
        cellSelector: '.slider-container-item',
        cellAlign: 'center',
        imagesLoaded: true,
        percentPosition: true,
        contain: true

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 :)
  • Like 2

Share this post

Link to post
Share on other sites

Thanks for this.

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

  • Like 3

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By DooM
      Hey guys,
      I'm using Form builder module by Ryan and I'm trying to render HTML success message after form is sent using value from this field:

      but it renders exactly as it is written in the field, not as HTML. To render it I just use echo
      <?= $successMessage ?> What am I missing?
      Thanks for any help. 🧒
    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      Kind Regards
    • By dragan
      What the f*ck JavaScript? A list of funny and tricky JavaScript examples
      Some really odd stuff there... worth scanning through. I chuckled more than once...
      "b" + "a" + +"a" + "a"; // -> 'baNaNa' NaN === NaN; // -> false (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' typeof NaN; // -> 'number' (It ain't new, so sorry if this has been posted previously here)
    • By Sergio
      Tailwind CSS Framework, a utility-first CSS framework for rapidly building custom designs
      This thread is a place for ProcessWire developers who use (or would like to use) Tailwind CSS to share their experience, tips, frustrations , solutions, code snippets and generally discuss all things tailwind.
      From the creators of Tailwind CSS
      Moderator note: the first few posts in this topic were split from this thread.
      Thanks, @apeisa! Yes, Tailwind is awesome! Responsive classes are a clever idea indeed, much easier to work with. The authors did an excellent job and keep improving it.
      Some people may feel a little sceptical, but I fell in love with it the moment I built my first project.  Although nowadays I work alone, I believe that Tailwind makes work between a frontend and backend developers much easier because it makes the HTML more declarative and you can grasp what the classes mean in a glimpse.
    • By Mithlesh
      Changing it to null
  • Create New...