Flickity js slider in Bricks builder in 5 easy steps.

With FlickityJS slider and Bricks builder, you can create beautiful, responsive sliders. In this article, we'll show you how to use Flickity with Bricks.
How to use Flickity js slider with Bricks builder in WordPress.

Flickity is a popular JavaScript library that makes it easy to create responsive, touch-friendly sliders. In this article, we’ll show you how to use Flickity with Bricks, a WordPress plugin that allows you to build custom pages with drag-and-drop.

With Flickity and Bricks, you can create beautiful, responsive sliders by following our tutorial below.

How to use Flickity js slider in Bricks builder?

for this, we will use CDN links for flickity

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

1- now let’s go to our page in bricks and add the structure for the slider like below

2- give the parent dive a class like ” .slider ” and make sure it has 100% width

3- Give each cell/child a class like ” slider-cell ” and adjust the CSS for it through bricks ” width/height/margin etc…”

4- in the code element at the top add the CDN links

5- There are a few things to keep in mind when using flickity with a CDN link. First, we need to make sure that the page is loaded before initializing our carousel. so now add the code below after the CDN links

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
      var flkty = new Flickity( '.slider ', {
         //options
      });
  });
</script>

the final code element should be like below

If you’re looking for some options for your Slider, you can visit the Flickity options page to find all the available settings. This page outlines all of the various options that are available, as well as provides some examples of how to use them. With so many options available, you’re sure to find the perfect setting for your needs.

if you are searching about how to use FlicktyJS Slider with Oxygen you can find it Here

Share the Post:

Leave a Reply

Your email address will not be published.

Related Posts