A better Slider with Flickity

The Slider element in Oxygen is simple, but fast and easy to use. It's usually enough in most case, but there is one little thing that bothers me a lots:
The animation is very jerky.

Apparently it comes from an old script, which works great but it uses the left CSS property for the animation. Which is absolutely not recommended nowadays.

If you are not sure what I am talking about, check this simple slider:

Then check this one, very similar but instead, it uses a proper way : the transform CSS property. It's way smoother.

There are plenty of sliders available, but I find Flickity to be one of the easiest to use. And it works great with Oxygen.

The good thing is that the structure is the same as the Slider element. In blue, the Slider element, in red, Flickity slider:

Step 1

Go to this page to download the JS and CSS files: https://flickity.metafizzy.co/
Upload and enqueue them:

wp_enqueue_style( 'flickity-css', plugin_dir_url( __FILE__ ) . 'assets/css/flickity.min.css' );
wp_enqueue_script( 'flickity', plugin_dir_url( __FILE__ ) . 'assets/js/flickity.pkgd.min.js', '', '2.2.1', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Add a section, then add a first Div, with a class 'carousel'.
Change his width to 100% and, very important, change the Display to Block:

Step 3

Inside the carousel Div, add a new Div with a class 'carousel-cell', with a 100% width and the height you want:

Then select his ID again and add your background image (here I choose Cover and the position is centered horizontally and vertically):

Step 4

Duplicate the 'carousel-cell' Div in order to create more slides and change their background images.
At the end the structure should be like this:

Step 5

Add a Code Block and in the Javascript panel, add this script:

(function($) {

    $('.carousel').flickity({
        // options
        cellAlign: 'left',
        contain: true,
    });

})(jQuery);

That's it, now you have the same slider as in my example.

Fickity has plenty of other options, check their page to learn more about it: https://flickity.metafizzy.co/

Comparison

The Slider Element

PROS: Easier to use, no need to install anything, much lighter (~20KB vs 54KB)
CONS: very few options, jerky animation, not much customization, look like a kind of old slider from the 90s

FLICKITY

PROS: plenty of options, easy to customize, modern, smooth
CONS: need to install some files, takes a little bit more time to set up, bigger files (54KB)

Customization

A little note about the customization.
It's just incredibly easy to change the style of the arrows, or dots with Flickity: https://flickity.metafizzy.co/style.html
Try to modify those from the Slider element, and you will quickly understand why I hate it ;)

Example

Finally, here is another example, a fullscreen slider with some nice effects:

https://oxygen4fun.supadezign.com/fullscreen-slider/