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...
How To Create Dynamic Slider with Flickity in Oxygen Builder Repeater?
Table Of Content:
Related Article
flickity di Repeater Oxygen Builder

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 portofolios.

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=portofolio&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/[email protected]/dist/flickity.min.css">
<script src="https://unpkg.com/[email protected]/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.

Related Article

How to Set a Website Always Use HTTPS (SSL)
In this article you will read how to set .htaccess so that the website always uses HTTPS (SSL) when opened by visitors.
iBee-Music-Mockup
Creating animated off canvas menus and hamburger buttons in Oxygen Builder
Tutorial on creating animated menu canvas and hamburger buttons in Oxygen Builder
restore from backup WordPress with WP CLI and SSH
Restore WordPress Backup with WP CLI & SSH
How to restore (restore) our WordPress data with WP CLI & SSH.
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
Back to top
cross