Flickity Carousel Slider in Oxygen - Easy Method

Posted on - April 16, 20200 Comments

In this tutorial, we'll look at creating a custom carousel slider. This can be useful to showcase your posts, products and custom post types with flickity using a repeater.

Flickity Carousel Example
Flickity Carousel Example

Things Needed

We will create the carousel with a repeater element as this way we can reuse the carousel.

Step 1: Enqueue the Necessary Scripts & CSS using Code Snippets

Create a new snippet - I named it scripts enqueue for my better understanding. I had the flickity.min.css & flickity.pkgd.min.js uploaded to the directory /wp-content/snips/

/*Carousel Start */

wp_enqueue_style( 'flickcore', '/wp-content/snips/flickity.min.css' );
wp_enqueue_script( 'flickjs', '/wp-content/snips/flickity.pkgd.min.js',array( 'jquery' ),'2.2.1',true);

/*Carousel End */

Step 2: Create the repeater element

For me I created a Repeater with the following elements. All the elements were wrapped inside a Div element as we need a div element to declare it as a carousel cell needed for the carousel to work well.

Repeater Element Structure
Repeater Element Structure

Step 3: Modify the Elements

Repeater Element

Add a class of flick (or a choice of yours) to the element

Under query option I manually put up the queries. For better understanding you can use Sridhar's Guide - https://wpdevdesign.com/manual-query-params-in-oxygen/

post_type=post&posts_per_page=6&no_found_rows=true&nopaging=true

For sizing option make width 100%

For layout make the element a block

Div Element

Add a Class of Carousel-cell for the div to work correctly as a single slide.

For Layout options, All child elements stacked vertically with Horizontal alignment in the center and Vertical Alignment in the top.

For the Div element I added a padding of 5 px to left and right to make spacing. It is advised to only use padding in the case of carousel to avoid errors that is caused by margins.

In the stance for width I gave 25% as this would yield 4 carousel in view. You can also give 33.33% if you require on 3 carousel in view or as needed.

For the height make height AUTO

Step 4: Create a Code Block

In the code block just paste the below javascript

jQuery(".flick").flickity({
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  autoPlay: true,
  prevNextButtons: false,
  pauseAutoPlayOnHover: false,
});

To explain the above the first set of code is to remove repeater navigation which is unnecessary in this stance. Second code ensures the height of the carousel is as needed and matches the highest height to the repeater itself with the class flick and finally the last code initializes the carousel script.

The code has been updated only to work with flickity. The code would initialize the carousel script.

When adding the javascript note that you should change the word flick to the name you used in the repeater.

Result

The final result is shared as a picture below:

Oxygen Element Block Shortcode

If you have blocks library enabled you can use the below shortcode to do all the above without needed to manually do much edits except edit the post query as necessary. The below would enqueue the flickity script in code block import necessary css and javascript along with the repeater.

[
]

Customization

If you prefer other carousels over flickity you can try the below:

Leave a Reply

Copyright © Ibrahim Jaber | Designed & Developed by Ibrahim Jaber
closephone-squarebarsenvelope-squarechevron-down-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram