Skip to main content

Swiper

info
  • HTML tag name: <builderius-swiper>
  • Implements 3rd-party script: Swiper.js v.9.2.0
  • Allowed children modules: any
  • Available since: 0.9.7 PRO

Description​

This module allows creating a fancy slider/carousel. It is based on swiper.js script.

How it works​

The module creates <builderius-swiper> custom HTML tag. It is a modular self contained instance of swiper.js

tip

Since <builderius-swiper> is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display CSS property.

We may utilize the data-settings attribute and pass any custom JSON config that is compatible with the official swiper.js API: https://swiperjs.com/swiper-api By default, all swiper modules are included.

The easiest way to create a slider would be this 3 steps process: Add a Collection module and fill with data, prepare its template (add modules, styles etc). Add swiper-wrapper custom class to Collection module and swiper-slide class to the outermost module inserted into a Template for the Collection. Add Swiper module and move the Collection into Swiper module.

Done! The slider will be automatically initiated. We suggest using Collection because it is a convenient way to render a lot of items/data and apply the same styles to the rendered items. However, also any other modules can be used to create a slider. Let’s review an example of full HTML layout:

<builderius-swiper>
  <!-- (required) a wrapper with class "swiper-wrapper"  -->
  <div class="swiper-wrapper">
    <!-- (required) each "slide" element with class "swiper-slide"  -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- (optional) if we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- (optional) if we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- (optional) if we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

API​

Attributes for Tabs​

data-settings​

This attribute accepts a stringified JSON object. This is the way of providing swiper.js API compatible config.

Events​

ready (scope: element)​

builderius-swiper-ready (scope: window)​

This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:

{ el }

Where el is the reference to the HTML element

Methods​

reInit​

This method resets and initiates the component.

Demo​

Demo page