How to add a custom SwiperJS slider in Bricks

In this tutorial, we’ll show you how to integrate a custom slider in Bricks using the SwiperJS library and how to add custom parameters using a JSON object.

Table of Contents

• Enqueue SwiperJS
• The JavaScript
• The DOM Structure
• Adding the custom options
• Example 1
• Example 2

Enqueue SwiperJS

First of all, we need to enqueue the SwiperJS library to our page. My personal preference is to conditionally enqueue my scripts based on an ACF field, but feel free to enqueue the files with your preferred method.

You don’t need to download the library since it’s already part of the core files of Bricks. You just need to enqueue it with the following code:

// Enqueue SwiperJS
wp_enqueue_script( 'bricks-swiper' );
wp_enqueue_style( 'bricks-swiper' );

The JavaScript

Add the following code to your page – again, use the method you like to enqueue it:

// Mount each SwiperJS slider after loading the page
window.addEventListener('load', (event) => {

   // Query the Swiper containers
   const swiperContainers = document.querySelectorAll('.swiper-container');

   // Check if any SwiperJS container exists on the page
   if (swiperContainers.length < 1) {
      return console.log('No swiper container found. Make sure you added the correct classes to your slider');
   }

   swiperContainers.forEach(container => {

      // Get the slider options from the data-attribute 
      let options = JSON.parse(container.dataset.swiperOptions);

      // Check if options are correctly inserted in the data-attribute
      if (!options) {
         console.log('No options found on the swiper container.');
      }

      // Initializing the slider
      let slider = new Swiper(container, options);

   });
});

The DOM Structure

In order for the script to work as expected, you’ll need to respect the following DOM structure (documentation) and add all the classes starting with swiper- to each element as shown here:

Note that in the following example, we added a query loop on the swiper-slide block in order to show the featured images of a custom post but that’s totally optional – you can insert any element inside the slide container. You can also change the DOM structure of the pagination container. In the example, we used the icon element to create the arrows, but you could use buttons, images, etc… Just make sure the correct classes are added.

Adding the custom options

On the swiper-container element, we’ll add a custom data-attribute called data-swiper-options where you can paste all your custom parameters (see all the parameters here) as a JSON object:

Example 1

Let’s make a quick example with a custom slider with the following properties:

• infinite loop
• one slide per view
• custom arrows
• custom pagination as a fraction

Following the SwiperJS documentation, our options should have the following parameters:

{
   loop:true,
   slidesPerView:1,
   pagination:{
      el:".swiper-pagination",
      type:"fraction"
   },
   navigation:{
      nextEl:".swiper-arrow-next",
      prevEl:".swiper-arrow-prev"
   }
}

Let’s transform this object into a valid JSON. To do that, you can open https://jsonformatter.curiousconcept.com/ and paste the previous JavaScript object into the main field and convert it to JSON. This is the result:

{
   "loop":true,
   "slidesPerView":1,
   "pagination":{
      "el":".swiper-pagination",
      "type":"fraction"
   },
   "navigation":{
      "nextEl":".swiper-arrow-next",
      "prevEl":".swiper-arrow-prev"
   }
}

And this is the compact result that we can use inside our data-attribute created previously:

{"loop":true,"slidesPerView":1,"pagination":{"el":".swiper-pagination","type":"fraction"},"navigation":{"nextEl":".swiper-arrow-next","prevEl":".swiper-arrow-prev"}}

Now the options should be applied to our slider:

Example 2

Let’s see now how to integrate the SwiperJS demo options into our slider. One of the popular demo that you can’t easily replicate using the Bricks native slider is the Effect Cards.

Let’s open the slider in a new window and check the source code. We’ll see the slider settings as follow:

Now let’s convert the options object into a valid compact JSON:

{"effect":"cards","grabCursor":true}

And insert it inside our data-swiper-options attribute:

And we are done: