Advanced Features

Advanced configuration options for complex slider scenarios.

Conditional Initialization

Only initialize the slider at specific breakpoints.

<!-- Only enable slider on mobile devices -->
<div data-swf-element="list" data-swf-init="mobile">

<!-- Only enable on tablet -->
<div data-swf-element="list" data-swf-init="tablet">

<!-- Only enable on desktop -->
<div data-swf-element="list" data-swf-init="desktop">

Value	Viewport
`"desktop"`	≥ 992px
`"tablet"`	569px – 991px
`"mobile"`	320px – 568px

Use Case: Mobile-Only Slider

Display content as a grid on desktop but as a slider on mobile:

<div data-swf-component class="features">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-init="mobile"
      data-swf-gap="16"
    >
      <div data-swf-element="item">Feature 1</div>
      <div data-swf-element="item">Feature 2</div>
      <div data-swf-element="item">Feature 3</div>
    </div>
  </div>
</div>

Disable Initialization

Completely prevent slider initialization:

<div data-swf-element="list" data-swf-disabled>

Useful when you want to conditionally enable the slider via JavaScript later.

Duplicate Slides

Clone all slides (useful for infinite scroll effects):

<div data-swf-element="list" data-swf-double="true">

Attribute	Description
`data-swf-double`	Duplicates all slides
`data-swf-double-slides`	Alias for `data-swf-double`

Filter/Dynamic Updates

Watch for DOM changes and automatically update the slider:

<div data-swf-element="list" data-swf-filter="true">

Useful when slides are added/removed dynamically (e.g., with filtering).

Controller/Sync (Linked Sliders)

Link two sliders together so they move in sync.

Basic Sync Setup

<!-- Main slider (controller) -->
<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-ctrl-role="controller"
      data-swf-ctrl-pair="gallery"
      data-swf-ctrl-id="main"
    >
      <div data-swf-element="item">
        <img src="image-1-large.jpg" />
      </div>
      <div data-swf-element="item">
        <img src="image-2-large.jpg" />
      </div>
      <div data-swf-element="item">
        <img src="image-3-large.jpg" />
      </div>
    </div>
  </div>
</div>

<!-- Thumbnail slider (synced) -->
<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-ctrl-pair="gallery"
      data-swf-ctrl-id="thumbs"
      data-swf-visible="4"
      data-swf-gap="10"
    >
      <div data-swf-element="item">
        <img src="image-1-thumb.jpg" />
      </div>
      <div data-swf-element="item">
        <img src="image-2-thumb.jpg" />
      </div>
      <div data-swf-element="item">
        <img src="image-3-thumb.jpg" />
      </div>
    </div>
  </div>
</div>

Controller Attributes

Attribute	Description	Applied To
`data-swf-ctrl-role="controller"`	Marks this slider as the controller	List element
`data-swf-ctrl-pair="[value]"`	Links sliders with matching pair values	List element
`data-swf-ctrl-id="[id]"`	Unique identifier for this controller	List element

Thumbnail Sync

For thumbnail galleries, use the thumb-id attribute:

<!-- Main gallery -->
<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div data-swf-element="list" data-swf-thumb-id="product-gallery">
      <!-- Large images -->
    </div>
  </div>
</div>

<!-- Thumbnails -->
<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-thumb-id="product-gallery"
      data-swf-visible="5"
    >
      <!-- Thumbnail images -->
    </div>
  </div>
</div>

Attribute	Description
`data-swf-thumb-id`	Links sliders with matching IDs for thumbnail sync

Both sliders with the same thumb-id will be synced — clicking a thumbnail navigates the main gallery, and swiping the gallery updates the thumbnail selection.

Named Components

Give your slider a name for JavaScript access:

<div data-swf-component="hero-slider">
  ...
</div>

Then access it via the API:

const heroSlider = window.swiperflow.find('hero-slider');

Full Example: Product Gallery with Thumbnails

<!-- Main product image -->
<div data-swf-component="product-main" class="product-gallery">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-thumb-id="product"
      data-swf-loop="true"
      data-swf-effect="fade"
    >
      <div data-swf-element="item">
        <img src="product-1-large.jpg" alt="Product view 1" />
      </div>
      <div data-swf-element="item">
        <img src="product-2-large.jpg" alt="Product view 2" />
      </div>
      <div data-swf-element="item">
        <img src="product-3-large.jpg" alt="Product view 3" />
      </div>
      <div data-swf-element="item">
        <img src="product-4-large.jpg" alt="Product view 4" />
      </div>
    </div>
  </div>

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

<!-- Thumbnail strip -->
<div data-swf-component="product-thumbs" class="product-thumbs">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-thumb-id="product"
      data-swf-visible="4"
      data-swf-gap="12"
      data-swf-centered="true"
    >
      <div data-swf-element="item">
        <img src="product-1-thumb.jpg" alt="Thumbnail 1" />
      </div>
      <div data-swf-element="item">
        <img src="product-2-thumb.jpg" alt="Thumbnail 2" />
      </div>
      <div data-swf-element="item">
        <img src="product-3-thumb.jpg" alt="Thumbnail 3" />
      </div>
      <div data-swf-element="item">
        <img src="product-4-thumb.jpg" alt="Thumbnail 4" />
      </div>
    </div>
  </div>
</div>

Advanced Features

On this page