Flickity on WordPress & Oxygen Builder

This article explains how to create sliders & carousels with flickity on WordPress & Oxygen Builder or any other website.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Flickity di WordPress dan Oxygen Builder
Updated: 25 December 2020
icon divider

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

Pros

  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>
</div>

CSS code

.carousel {
  background: #eee;
}

.carousel-cell {
  width: 66.6%;
  height:400px;
  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.

jQuery('.carousel').flickity({
  // 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

dragable

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

// disabling
draggable: false

// activating
draggable: true

freeScroll

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

// disabling
freeScroll: false

// activating
freeScroll: true

prevNextButton

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

// disabling
prevNextButtons: false

// activating
prevNextButtons: true

wrapAround

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

groupCells

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%

autoPlay

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 

pauseAutoPlayOnHover

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

Reference

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 *

Latest Article

How to Apply Headroom.js on WordPress and Oxygen Builder
This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Read more...
How to Create an Off-Canvas Menu with Oxygen Builder
This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
Read more...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
Read more...
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
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID