How To Create Dynamic Slider with Flickity in Oxygen Builder Repeater?

This tutorial explain how to create dynamic slider using flickity combining with Oxygen Builder Repeater element.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
flickity di Repeater Oxygen Builder
Updated: 10 January 2021
icon divider

Hi Digital Buddy! In the previous article, we wrote about using flickity in WordPress & Oxygen Builder. So in this article we will share an example of create dynamic slider with flickity in Oxygen Builder repeater.

Introduction

One of the elements provided in Oxygen Builder is a repeater element.

Repeater element is an element for displaying repeated dynamic data retrieved from query data.

You can read about this repeater element in documentation Oxygen Builder page.

Sliders or carousels created with the help of flickity.js can also be combined with repeaters so that we can create sliders or carousels from dynamic data.

For those of you who don't know about Oxygen Builder & Flickity, you can read our article:

Oxygen Builder, the Best WordPress Page Builder Plugin?

Flickity on WordPress & Oxygen Builder.

Dynamic Slider Sample

In the following example, is a slider that displays the featured images of the 5 most recent posts.

How To Make It?

  1. Add an element of " Repeater "
  2. Add elements to the Div inside the repeater , in the example above are the images and text that will be taken from the article.
Flickity HTML structure in Oxygen Builder Repeater
Flickity HTML structure in Oxygen Builder Repeater
  1. Insert featured image data for image and title in text.
  2. Enter the query on the repeater as needed, in this example for 5 posts, without pagination .
post_type=post&no_found_rows=true&posts_per_page=5
  1. IMPORTANT! Add a rep-carousel class to a repeater & a rep-carousel-cell class to a Div inside a repeater to target elements to run flickity on the Oxygen Builder repeater. Also specify the Div width and other sizes if needed (eg image width).
Flickity rep-carousel class in oxygen builder repeater
Flickity rep-carousel class in oxygen builder repeater
  1. Add a " Code Block " element outside the repeater element, filled with:

a. HTML script to call CSS and JS flickity

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

b. You can add CSS for the elements you put in the repeater div according to your needs.

/* white colour text link */
.title-rep-flick a {color:#fff;}

/* darker image */
.image-rep-flick {
  filter: brightness(50%);
}

/* image lighter when hover */
.image-rep-flick:hover {
  filter: brightness(90%);
  transition: 0.3s all ease-in;
}

c. Javascript for flickity initiation. For a more complete list of options please read the article "Options on Flickity in WordPress & Oxygen Builder. "

(function($) {
   $('.rep-carousel').flickity({
    cellSelector: '.rep-carousel-cell',
    freeScroll: 'false',
    wrapAround: 'true',
    autoPlay: 'true',
    });
})(jQuery);
  1. Save and look at the front page of your article.

IMPORTANT! We had a problem with repeater flickity functionality due to the lazy load image feature of the Litespeed Cache plugin. The solution is disable this feature on the slider by adding the wmu-preview-img class to the image element.

Reference

Conclusion

Those are the steps to use Flickity in Oxygen Builder Repeater to create dynamic sliders and carousels.

By using this technique, besides we can create a dynamic slider or carousel, it is also relatively lighter than using additional plugins, because it only calls up the assets we need.

What do you think? Are there any other techniques besides using flickity that are more attractive to apply in making sliders & carousels on your website? Please give feedback in the comments column below.

Happy Digitalize Your Life!

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Article

How to Apply Headroom.js on WordPress and Oxygen Builder
This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Read more...
How to Create an Off-Canvas Menu with Oxygen Builder
This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
Read more...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
Read more...
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID