Attributes Reference Complete reference for all SwiperFlow configuration attributes
SwiperFlow is configured entirely through HTML data attributes. All configuration attributes are added to the list element (data-swf-element="list").
Category Attributes Basic speed, gap, visible, loop, initial, direction, centered, grab, swipe, touchNavigation Navigation arrows and pagination dots Autoplay autoplay, autoplay-delayEffects effect (fade, cards, creative, creative-flat)Breakpoints bp-desktop, bp-tablet, bp-mobileAdvanced init, disabled, double, filter, controller sync
All attributes use the data-swf- prefix:
< div data-swf-element = "list" data-swf-loop = "true" data-swf-speed = "600" data-swf-gap = "20" > For boolean options, simply add the attribute to enable:
<!-- Enable loop mode --> < div data-swf-element = "list" data-swf-loop = "true" > <!-- Or just the presence of the attribute --> < div data-swf-element = "list" data-swf-loop > To explicitly disable (when the default is true):
< div data-swf-element = "list" data-swf-grab = "false" > Attribute Type Default Description data-swf-speednumber 400Transition speed in milliseconds data-swf-gapnumber 0Space between slides in pixels data-swf-visiblenumber/string 1Slides per view ("auto" supported) data-swf-loopboolean falseEnable continuous loop data-swf-initialnumber 0Index of initial slide (0-based) data-swf-directionstring "horizontal""horizontal" or "vertical"data-swf-centeredboolean falseCenter the active slide data-swf-grabboolean trueShow grab cursor data-swf-swipeboolean trueEnable touch/swipe data-swf-touchboolean trueEnable mouse drag simulation data-swf-active-classstring "swiper-slide-active"Class for active slide data-swf-additionalnumber 0Additional slides to clone in loop
Attribute Type Default Description data-swf-autoplayboolean falseEnable autoplay data-swf-autoplay-delaynumber 3000Delay between transitions (ms)
Attribute Type Default Description data-swf-effectstring "none"Visual effect: "fade", "cards", "creative", "creative-flat"
Attribute Type Default Description data-swf-bp-desktopnumber — Slides per view at ≥992px data-swf-bp-tabletnumber — Slides per view at 569-991px data-swf-bp-mobilenumber — Slides per view at 320-568px
Attribute Type Description data-swf-initstring Conditional init: "desktop", "tablet", "mobile" data-swf-disabled— Prevent initialization data-swf-double— Duplicate all slides data-swf-filter— Watch for DOM changes data-swf-ctrl-rolestring Controller role: "controller" data-swf-ctrl-pairstring Link sliders with matching values data-swf-ctrl-idstring Unique controller identifier data-swf-thumb-idstring Link thumbnail sliders data-swf-keyboardboolean Enable keyboard navigation data-swf-easestring Easing function: "ease", "ease-in", "ease-out", "ease-in-out", "linear", or cubic-bezier(...)