Creating Dynamic Slider in Oxygen Builder

I’ve been using Oxygen Builder in my last websites, it is the most flexible builder that I have used so far. It offers way to load data dynamically, displaying it in the anyway that you want and it also offers a very easy way to create sliders. The point is, it is not possible to use dynamic data with slider builder together, BUT! it doesn’t mean that we can not hand make it, which is not very difficult.

For this tutorial, I’m creating it using Owl Carousel 2, but you can use any other carousel/slider plugin that you want.

Step 1 – Setup

Before we start it, we have to include Owl Carousel 2 into our website.

Install Code Snippets

Oxygen does not has a way to include external scripts or styles, so we will need to do it using a plugin called Code Snippets, which is a such great plugin to test and add codes in the website.

Import Owl Carousel 2

With Code Snippets installed, go to your Admin Panel > Snippets > Add New. Put the code bellow into the Code field and save it:

function load_owl_carousel() {
  wp_enqueue_script('owl-carousel-2', '<https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js',['jquery>']);
  wp_enqueue_style( 'owl-carousel-2', '<https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css>');
  wp_enqueue_style( 'owl-carousel-2-theme', '<https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css>');
}
add_action( 'wp_enqueue_scripts', 'load_owl_carousel' );

Make sure the just added snippets is activated and let’s go to next step.

Step 2 – Put the content using Repeater

Since that native Oxygen slider is not supporting dynamic data, so we won’t use it, but we still need to use Repeater, what’s a component come with Oxygen, to load data.

Loading dynamic data

At first, set Repeater to load data in the layout that you want. I’m loading post with title and featured image to make it easy and clear like this:

Data loaded by Oxygen Repeater

Turning repeated item into slider (Finally!!)

Having all the data in the page, is the moment to turn it into a slider. To use Owl Carousel, we need to add owl-carousel and owl-theme CSS classes to our Repeater component and item CSS class into each repeated item.

Repeater component with respective CSS classes
Repeated item with respective CSS class

PS: In this moment, all of items can disappear in the Oxygen editor maybe, but don’t worry, it is still there.

The last thing is add Owl Carousel script to our repeater:

jQuery('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        }
    }
})
Repeater component with scripts

Save it and check the result in the front page!

Owl Carousel result

Bonus!!

Since we are using Owl Carousel, of course we can make a carousel with it, the only thing to do is changing script like bellow:

jQuery('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

And the result will be responsible like this

Owl Carousel result

This is because Owl Carousel is responsible supported by default, but this really depends on what plugin are you using, there is many other configurations in the Owl Carousel docs, have a check if you’re interested.