Flickity on WordPress & Oxygen Builder

This article explains how to create sliders & carousels with flickity on WordPress & Oxygen Builder or any other website.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Flickity di WordPress dan Oxygen Builder

Flickity is javascript + css which can be used to create sliders & carousels.

Example results

Previously, we first saw how the final example of a slider / carousel created with flickity.js


  1. Responsive
  2. Touchable/Dragable
  3. Smoother transitions
  4. Many options

Installation Method

There are several ways to install flickity on WordPress:

  1. Html & CSS
  2. jQuery
  3. Vanilla Script

Basically when we want to use flickity, we create one div ( parent element ) with the carousel class or other classes that we define ourselves, and in that div we fill some div ( child element ) with class carousel-cell to indicate that the div is a separate carousel / slider.

The flickity DIV array in Oxygen Builder
The flickity DIV array in Oxygen Builder

Sample Code

1. Using HTML & CSS

Below is an example of HTML & CSS code to create a slider with flickity. Please modify it according to your needs.

HTML code

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- html -->
<div class="carousel" data-flickity='{ "freeScroll": true, "wrapAround": true, "autoPlay": 2000 }'>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/11/headroom-js-pada-WordPress-dan-Oxygen-Builder.jpg); background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/Parallax-Effect-with-Rellax-JS-in-Oxygen-Builder.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/setting-website-selalu-menggunakan-https-ssl.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/menambah-email-di-outlook.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/07/apa-itu-wordpress.jpg);background-size:cover;background-position:center;"></div>

CSS code

.carousel {
  background: #eee;

.carousel-cell {
  width: 66.6%;
  margin-right: 10px;
  border-radius: 5px;

2. Using jQuery

The jQuery script below can replace the flickity initiation with HTML (keep in mind the addition of CSS too).

I made it by adding the code to the Oxygen Builder code block . The advantage is that it is easier for us to set up the div child element because it can be adjusted via the Oxygen Builder panel.

  // options
  freeScroll: false,
  wrapAround: false,
  content: true

For those of you who don't know about Oxygen Builder, you can read our article " Oxygen Builder, the Best WordPress Page Builder Plugin? "

3. Using Vanilla Script

If you want to use Vanilla Script to initiate flickity, you can use the code example as below. Don't forget to pay attention to the addition of CSS too.

var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity( '.carousel', {
  // options

Options on Flickity


Can be "dragged" (click and drag). The default is enabled for 2 or more slides.

// disabling
draggable: false

// activating
draggable: true


This option for free slide slide doesn't have to fit on one slide always.

// disabling
freeScroll: false

// activating
freeScroll: true


This option is to display the navigation arrows on the left and right of the slider.

// disabling
prevNextButtons: false

// activating
prevNextButtons: true


If this option is activated then after the last slider will return to the initial slider again (infinite slide).

// disabling
wrapAround: false

// activating
wrapAround: true


This option causes the elements of several carousel-cells to become a group, so that one move will move several cells at once.

// option to move multiple cells according to the capacity accommodated in the viewport at once
groupCells: true

// if inputted with numbers, then the cell grouping will match the numbers entered
groupCells: 2

// if it is filled with percent, then the cell grouping will be grouped according to the percentage number in the currently active viewport
wrapAround: 80%


This option will move the slider automatically

// automatically moves every 3 seconds
autoPlay: true

// automatically moves every number input in milliseconds
// an example of the slider option moves automatically in 1500ms or 1.5s
autoPlay: 1500 


When combined with autoPlay, then we can determine whether the slider will stop on hover or not.

// By default the slider will stop on hover
pauseAutoPlayOnHover: true

// the slider will not stop on hover
pauseAutoPlayOnHover: false


You can download javascript + css flickity and find out more about the other options on the site https://flickity.metafizzy.co/ .

Banner Homepage Flickity

Conclusion "Flickity On WordPress"

That's a little explanation about flickity in WordPress & Oxygen Builder. However, we can use this technique to apply to any website, only need to adapt it according to each platform.

What do you think? Please give your feedback in the comments column below.

Happy Digitalize Your Life!

Leave a Reply

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

Related Article

Slick Slider in Oxygen Builder
10 Example Slick Sliders in Oxygen Builder & How To Make Them
How to create a slider with Slick Slider in Oxygen Builder contains the stages of creation, the options and 10 sample sliders of the results.
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.
Creating animated off canvas menus and hamburger buttons in Oxygen Builder
Tutorial on creating animated menu canvas and hamburger buttons in Oxygen Builder
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