what is flickity.js?

Flickity is a JavaScript slider library that makes carousels, galleries, & sliders that feel lively and effortless. Also has Physics-based animation, Touch enables, and Responsive styling.

what is the results will look like?

here is one example of what we'll build, but the possibilities are endless. especially with flickity as they have too many options to customize your slider as you need.

so let's start and see how to use it within oxygen builder.

first, you need to create this layout in oxygen

1. add ( .slider ) class to the main div (div#2 in the image).
2. set it's width to 100%, - display:block
3. the children of that div are the slides so add as many as you want and give each of them ( .slider-cell ). if you want a full-width slide set its width to 100% and specify the height you want. in my example, I set the cell to be 33% width and height of 350px;
4. now for the code block in PHP & HTML add CDN links

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" integrity="sha512-BiFZ6oflftBIwm6lYCQtQ5DIRQ6tm02svznor2GYQOfAlT3pnVJ10xCrU3XuXnUrWQ4EG8GKxntXnYEdKY0Ugg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js" integrity="sha512-cA8gcgtYJ+JYqUe+j2JXl6J3jbamcMQfPe0JOmQGDescd+zqXwwgneDzniOd3k8PcO7EtTW6jA7L4Bhx03SXoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

if it causes block resource on google page speed, add defer to the script tag

and in JAVASCRIPT add

jQuery(document).ready(function($) {
    $('.slider').flickity({
        // options
        cellAlign: 'right',
        freeScroll: true,
freeScrollFriction: 0.03

    });
});

as I mentioned the customization and the possibilities are endless, you can add a repeater inside the cell and create a products slider as an example. you can find all the options you can use on their docs here: flickity.metafizzy.co/options.html