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

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:


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


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


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:


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

And we are done:

Instant access to 390+ Bricks code tutorials with BricksLabs Pro


  • Thomas Bauwens

    Hi, this doesn't work when integrating Swiper's new effect parameter. I reached out to them and they told me Swiper is not supposed to work with data attributes (although it works with the standard swiper. Would you have a workaround for that maybe?

  • Brian Lovelace

    Hey Maxime! Thanks for this! Can you do a version of this where data is pulled in through a query loop builder? I've tried to add the query loop onto the 'swiper-wrapper' element and it breaks the entirety of the style vs if I do each 'swiper-slide' card by hand.

    Pretty much I'm making a slider with a bunch of photos with different aspect ratios. When I build it out by hand, selecting each piece of media, I can set it to '.swiper-slide img {width: 100%!important} and each image will maintain its aspect ratio correctly. Even if I keep these settings, and use the query loop, the .swiper-slide div I've created goes to a fixed width, making the images all have wacked-out aspect ratios (compressed or stretched). Hopefully this makes sense. If you can find a way that I can use the query loop to pull in images in this way I'd love to see an update that shows how to combat this! I had the same issue when I built the same slider in oxygen builder using the repeater element. Wondering what it is that I'm doing wrong. Thank you!

    • Brian Lovelace

      Solved. I'm a dummy. Query Loop goes on the swiper-slide div, not the swiper-wrapper div.

Leave your comment