How to use Flickity with the Repeater element

If you have never used Flickity with Oxygen, please read this tutorial first: A Better Slider with Flickity

In this tutorial we will just make a very basic example, with only pictures from the featured images of a Post Type. So the structure will be very simple:

Step 1

Add a Repeater element, then add the class .rep-carousel to that repeater.

Step 2

For the Query, I add a manual one, as I don't want the pagination (and I can control the number of posts I want) :

post_type=portfolio&no_found_rows=true&posts_per_page=5

So in my example I will have 5 slides, from my post type Portfolio.

More info in WPDevDesign: How to Remove Pagination for Repeater Queries in Oxygen

Step 3

Click on the Div and add the class .rep-carousel-cell.

Select the ID and click on the Data button to add a featured image as a background. Set the size to Cover and change the top and left positions to 50% (center).

Select the class (.rep-carousel-cell) and change the width and height.
Note that I have also changed the width to 100% in mobile mode. So it's responsive and looks better on lower resolution.

Step 4

Add a Code Block but be careful to NOT ADD it inside the repeater (or the element will be...repeated).
Paste this Javascript code:

(function($) {

    $('.rep-carousel').flickity();

})(jQuery);

With the default settings, the result looks already pretty good:

Fixing the issues

Maybe you didn't notice but in my query, I set the number of post to 5.
But in the slider, there are 6 dots...

It's because the Repeater element has added some extra Divs for the pagination. As it is in the same level as the other Divs, it will be considered as a slide, even if it's empty.

Flickity has an option for that, where we can specify the selector for cell elements.

(function($) {

    $('.rep-carousel').flickity({
        cellSelector: '.rep-carousel-cell',
    });

})(jQuery);

Duplicate IDs problem

You may also have noticed that all the Divs have the same ID, which is not great for SEO. There are several ways to fix it as you can see in this article : Workaround for Oxygen Repeater’s Duplicate IDs Problem

The full code for my slider is now:

(function($) {

    //abort if we're viewing inside builder
    if ($('html').attr('ng-app') == 'CTFrontendBuilder')
        return;

    var ids = {};
    $('.oxygen-body [id]').each(function() {
        if (this.id && ids[this.id]) {
            $(this).removeAttr('id');
        }
        ids[this.id] = 1;
    });

    $('.rep-carousel').flickity({
        cellSelector: '.rep-carousel-cell',
    });

})(jQuery);

Cool CSS effect

If you want to have the same effect as the slider at the top of this page, you can add this CSS

.rep-carousel .rep-carousel-cell {
    opacity: .3;
    transition: 0.3s ease all;
    transform: scale(.8)
}

.rep-carousel .rep-carousel-cell.is-selected {
    opacity: 1;
    transform: scale(1)
}

More info: https://flickity.metafizzy.co/