Jump to content

Using Metafizzy Flickity Slider with ProcessWire


EyeDentify
 Share

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 3
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Chris Bennett
      Hi all, have just upgraded to 3.0.184, a little late to the party.
      Not sure about a few things and would love to understand better.

      It seems to me like there is now an increased over-reliance on inline style width declarations on Inputfields.
      To me, they seem like extra bits of unnecessarily specific css that impede easily customisable CSS.
      I can't wrap my head around why they are needed.
      Surely CSS and flexbox can do this better, easier, with much greater flexibility, less javascript, less thread work, less bytes and less layout shifts?
      In previous versions, data-colwidth on everything with a width worked just fine.
      Was very easy to target li[data-colwidth] and use calc to add a margin if desired and use flexbox to flex like a champion, taking up available space.
      Lovely, simple, flexible and lightweight. 

      Now it seems some wrappers have a style="width: ..." where once they had data-colwidth and some Inputfields have data-original-width. 
      Each can technically be over-ridden using ...sigh... a multitude of repetitive !important declarations, but that is not ideal.
      Is there something I am missing? Is there a reason the inline width styles were needed?
      Is there a benefit I am unaware of? Can I help provide possible alternate solutions to whatever use case necessitated it?
      In a similar vein, I also got to see maxColHeightSpacer for the first time.
      Can't say it was a pleasure for it to appear.
      Similar to the use of inline style="width:..." on Inputfields, in the age of flexbox I don't understand why a spacer div with inline height is needed.
      Is there a need for it I just don't get? 
      Hadn't seen it before but found some info from a few years ago here:

      Anyway, I would honestly love any insight on any of this.
      Would love to understand the 'why' and, if possible, help. 
    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
       
    • By Liam88
      Hi,
      I'm really struggling with this as it's something not in my wheelhouse. I'm creating a blog style page (a grid of cards) which has attributes.
      I have a snip of javascript which grabs values from checkboxes which are put into a value like the below:
      ?content=static_video&channel=facebook-ads_instagram-ads
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&") ); document.location.href = location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&"); } As I'm currently refeshing the page on button click with those values the end result includes the location but can easily remove this.
      I then use this value in "input->get" to get the values which I then append to a find() rule. See code below:
      $selector = "template='adbank_pages',sort=published,include=all,status!=hidden"; // Get the channel and content inputs $channel = $input->get->channel; $content = $input->get->content; if($channel){ // Grab the channel string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } if($content){ // Grab the content string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $contArray = explode("_", $content); $cont = $content = str_replace('_', '|', $content); $selector = $selector .= ",ab_content=$cont"; } if($input->get){ // If a valid input result $all = $pages->find($selector); } }else{ // If no input show them all $all = $page->children("template='adbank_pages',sort=-published,include=all,status!=hidden"); } $items = $all->find("limit=12"); // Limit the output and use pagination As mentioned above I currently refresh the page to adjust the $selector filter within the $all with a fallback $all if there are no results.
      I know I need to use AJAX to filter the content without refresh but I am really struggling with the set up. I have read multiple posts including the original by Ryan but still confused.
      If anyone can direct/help on this it would be appreciated.
      Thank you
    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
×
×
  • Create New...