Responsive Breakpoints

Configure different slides per view at different screen sizes.

Breakpoint Attributes

Attribute	Viewport	Width Range
`data-swf-bp-desktop`	Desktop	≥ 992px
`data-swf-bp-tablet`	Tablet	569px – 991px
`data-swf-bp-mobile`	Mobile	320px – 568px

Basic Usage

<div
  data-swf-element="list"
  data-swf-bp-desktop="4"
  data-swf-bp-tablet="2"
  data-swf-bp-mobile="1"
>

This creates a slider that shows:

4 slides on desktop
2 slides on tablet
1 slide on mobile

Example: Product Grid

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-bp-desktop="4"
      data-swf-bp-tablet="2"
      data-swf-bp-mobile="1"
      data-swf-gap="24"
      data-swf-loop="true"
    >
      <div data-swf-element="item">Product 1</div>
      <div data-swf-element="item">Product 2</div>
      <div data-swf-element="item">Product 3</div>
      <div data-swf-element="item">Product 4</div>
      <div data-swf-element="item">Product 5</div>
      <div data-swf-element="item">Product 6</div>
    </div>
  </div>

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

Partial Breakpoints

You don't need to specify all breakpoints. SwiperFlow will use the data-swf-visible value (default: 1) for unspecified breakpoints:

<!-- Only customize desktop, others default to 1 -->
<div
  data-swf-element="list"
  data-swf-bp-desktop="3"
>

Combining with data-swf-visible

The data-swf-visible attribute sets the base/default value, while breakpoint attributes override it at specific screen sizes:

<div
  data-swf-element="list"
  data-swf-visible="2"
  data-swf-bp-desktop="4"
>

In this example:

Desktop (≥992px): 4 slides
Tablet and mobile: 2 slides (from data-swf-visible)

How Breakpoints Work

SwiperFlow maps these attributes to Swiper's breakpoint system:

SwiperFlow Attribute	Swiper Breakpoint
`data-swf-bp-desktop`	`breakpoints['991'].slidesPerView`
`data-swf-bp-tablet`	`breakpoints['568'].slidesPerView`
`data-swf-bp-mobile`	`breakpoints['320'].slidesPerView`

Swiper breakpoints use a "mobile-first" approach — the value applies at that width and above, until the next breakpoint.

Example: Portfolio Gallery

A portfolio that adapts to screen size:

<div data-swf-component class="portfolio">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-bp-desktop="3"
      data-swf-bp-tablet="2"
      data-swf-bp-mobile="1"
      data-swf-gap="32"
      data-swf-centered="true"
    >
      <div data-swf-element="item">
        <img src="project-1.jpg" alt="Project 1" />
        <h3>Project Title</h3>
      </div>
      <div data-swf-element="item">
        <img src="project-2.jpg" alt="Project 2" />
        <h3>Project Title</h3>
      </div>
      <div data-swf-element="item">
        <img src="project-3.jpg" alt="Project 3" />
        <h3>Project Title</h3>
      </div>
      <div data-swf-element="item">
        <img src="project-4.jpg" alt="Project 4" />
        <h3>Project Title</h3>
      </div>
    </div>
  </div>

  <div data-swf-element="pagination">
    <button data-swf-element="pagination-dot" class="dot"></button>
  </div>
</div>

Example: Team Members

<div data-swf-component class="team-slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-bp-desktop="4"
      data-swf-bp-tablet="3"
      data-swf-bp-mobile="1"
      data-swf-gap="20"
      data-swf-loop="true"
    >
      <div data-swf-element="item" class="team-member">
        <img src="member-1.jpg" alt="Team Member" />
        <h4>John Doe</h4>
        <p>CEO</p>
      </div>
      <!-- More team members... -->
    </div>
  </div>

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

Tips

Always test your breakpoints on actual devices or browser dev tools
Consider the content in each slide when choosing slides per view
Use data-swf-gap to ensure proper spacing at all breakpoints
Combine with data-swf-centered for a polished look on mobile

Responsive Breakpoints

On this page