Jump to content
EyeDentify

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">
                    
    <?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 :)
  • 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

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

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By Mithlesh
      Hi there,
      My form is not getting submitted, it is showing:
      Unable to verify successful email delivery of this form submission.
      Attaching for your reference as well: 

      In the Backend, it is showing Connection timed out with smtp.gmail.com
      Pl guide me how to resolve that
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
×
×
  • Create New...