Getting Started

SwiperFlow is an attribute-based wrapper for Swiper.js designed for Webflow and any HTML-based workflow. Configure advanced slider functionality entirely through HTML data attributes — no JavaScript required.

Installation

Add the SwiperFlow script to your site. In Webflow, go to Project Settings → Custom Code and add this before the </body> tag:

<script src="https://cdn.jsdelivr.net/npm/@jamesbattye-dev/swiperflow@latest/dist/index.js"></script>

SwiperFlow includes Swiper.js and its CSS, so you don't need to add them separately.

Basic Structure

Every SwiperFlow slider requires this HTML structure:

<div data-swf-component="my-slider">
  <div data-swf-element="wrapper">
    <div data-swf-element="list">
      <div data-swf-element="item">Slide 1</div>
      <div data-swf-element="item">Slide 2</div>
      <div data-swf-element="item">Slide 3</div>
    </div>
  </div>
</div>

Element Roles

Attribute	Role
`data-swf-component="identifier"`	Main container with a unique identifier (required)
`data-swf-element="wrapper"`	Wrapper element (required by Swiper). Also accepts: `"wrap"`, `"container"`
`data-swf-element="list"`	The slides container — this is where you add configuration attributes
`data-swf-element="item"`	Individual slide items

Adding Configuration

Add data-swf-* attributes to the list element to configure slider behavior:

<div
  data-swf-element="list"
  data-swf-loop="true"
  data-swf-speed="600"
  data-swf-visible="3"
  data-swf-gap="20"
>
  <!-- slides -->
</div>

Adding Navigation & Pagination

Include optional navigation arrows and/or pagination:

<div data-swf-component="hero-slider">
  <div data-swf-element="wrapper">
    <div data-swf-element="list">
      <!-- Slides here -->
    </div>
  </div>

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

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

For pagination, include a pagination-dot element as a template. SwiperFlow will clone this for each slide.

Your First Slider

Here's a complete example with loop, gap, and navigation:

<div data-swf-component="image-carousel">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-loop="true"
      data-swf-gap="24"
      data-swf-speed="500"
    >
      <div data-swf-element="item">
        <img src="slide-1.jpg" alt="Slide 1" />
      </div>
      <div data-swf-element="item">
        <img src="slide-2.jpg" alt="Slide 2" />
      </div>
      <div data-swf-element="item">
        <img src="slide-3.jpg" alt="Slide 3" />
      </div>
    </div>
  </div>

  <div data-swf-element="navigation">
    <button data-swf-element="prev-arrow">Previous</button>
    <button data-swf-element="next-arrow">Next</button>
  </div>
</div>