Core Concepts

Understanding how SwiperFlow works will help you build more effective sliders.

How SwiperFlow Works

SwiperFlow uses a declarative, attribute-based system:

1. Add structure attributes to your HTML elements to identify the slider components
2. Add configuration attributes to customize the slider behavior
3. SwiperFlow handles the rest — it automatically initializes and configures Swiper based on your attributes

When the page loads, SwiperFlow scans the DOM for elements with data-swf-component, parses all the data-swf-* attributes, and creates Swiper instances with the corresponding configuration.

The Attribute Prefix

All SwiperFlow attributes use the data-swf- prefix:

• data-swf-component="identifier" — Marks the slider container with a unique identifier (required)
• data-swf-element — Identifies structural elements
• data-swf-loop, data-swf-speed, etc. — Configuration options

Element Hierarchy

data-swf-component="my-slider" (Container)
└── data-swf-element="wrapper" (Wrapper)
    └── data-swf-element="list" (Slides Container) ← Configuration goes here
        ├── data-swf-element="item" (Slide)
        ├── data-swf-element="item" (Slide)
        └── data-swf-element="item" (Slide)

Element Roles

Alternative Element Names

The wrapper element accepts these aliases:

• data-swf-element="wrapper" (default)
• data-swf-element="wrap"
• data-swf-element="container"

Configuration Placement

<!-- ✓ Correct -->
<div data-swf-component="my-slider">
  <div data-swf-element="wrapper">
    <div data-swf-element="list" data-swf-loop="true" data-swf-gap="20">
      ...
    </div>
  </div>
</div>

<!-- ✗ Wrong - attributes on wrong element -->
<div data-swf-component="my-slider" data-swf-loop="true">
  ...
</div>

Navigation & Pagination

Navigation and pagination elements are optional and placed outside the wrapper, but inside the component:

<div data-swf-component="testimonials">
  <div data-swf-element="wrapper">
    <div data-swf-element="list">
      <!-- slides -->
    </div>
  </div>

  <!-- Navigation arrows -->
  <div data-swf-element="navigation">
    <div data-swf-element="prev-arrow">←</div>
    <div data-swf-element="next-arrow">→</div>
  </div>

  <!-- Pagination dots -->
  <div data-swf-element="pagination">
    <div data-swf-element="pagination-dot"></div>
  </div>
</div>

Navigation Elements

Pagination Elements

The pagination dot element serves as a template. SwiperFlow uses its class name and creates clones for each slide.

CSS Classes

SwiperFlow uses your existing CSS classes and adds behavior:

• Slide items use the first class from data-swf-element="item" elements as the slide class
• Active slide receives swiper-slide-active by default (customizable via data-swf-active-class)
• Active pagination dot receives is-active class

Automatic Initialization

SwiperFlow automatically initializes on DOMContentLoaded. You can also:

• Manually reinitialize: Call window.swiperflow.init() after DOM changes
• Prevent initialization: Add data-swf-disabled to the list element
• Conditional initialization: Use data-swf-init="mobile" to only initialize at specific breakpoints

Breakpoints

SwiperFlow uses these viewport breakpoints:

Use data-swf-bp-desktop, data-swf-bp-tablet, and data-swf-bp-mobile to set different slides per view at each breakpoint.

Next Steps