Basic Configuration
Fundamental slider behavior attributes
These attributes control the fundamental behavior of your slider.
Speed
Control how fast slides transition.
<div data-swf-element="list" data-swf-speed="600">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-speed | speed | number | 400 |
Value is in milliseconds. Higher values = slower transitions.
Gap (Space Between)
Set the space between slides.
<div data-swf-element="list" data-swf-gap="24">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-gap | spaceBetween | number | 0 |
Value is in pixels.
Slides Per View
Control how many slides are visible at once.
<!-- Fixed number -->
<div data-swf-element="list" data-swf-visible="3">
<!-- Auto width based on slide content -->
<div data-swf-element="list" data-swf-visible="auto">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-visible | slidesPerView | number/string | 1 |
Use "auto" to let slides determine their own width.
Loop
Enable continuous loop mode.
<div data-swf-element="list" data-swf-loop="true">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-loop | loop | boolean | false |
When enabled, the slider creates clones of slides to enable seamless looping.
Additional Loop Slides
Control how many extra slides to clone in loop mode:
<div data-swf-element="list" data-swf-loop="true" data-swf-additional="2">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-additional | loopAdditionalSlides | number | 0 |
Initial Slide
Set which slide to show first.
<div data-swf-element="list" data-swf-initial="2">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-initial | initialSlide | number | 0 |
Index is 0-based, so 2 means the third slide.
Direction
Set the slide direction.
<div data-swf-element="list" data-swf-direction="vertical">| Attribute | Swiper Property | Type | Default | Values |
|---|---|---|---|---|
data-swf-direction | direction | string | "horizontal" | "horizontal", "vertical" |
For vertical sliders, ensure the container has a defined height.
Centered Slides
Center the active slide in the viewport.
<div data-swf-element="list" data-swf-centered="true">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-centered | centeredSlides | boolean | false |
Useful for carousels where you want the active item prominently centered.
Interaction Controls
Grab Cursor
Show a grab cursor when hovering over the slider.
<!-- Enabled by default, disable with: -->
<div data-swf-element="list" data-swf-grab="false">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-grab | grabCursor | boolean | true |
Touch/Swipe
Enable or disable touch swipe interactions.
<!-- Disable swiping -->
<div data-swf-element="list" data-swf-swipe="false">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-swipe | allowTouchMove | boolean | true |
Mouse Drag Simulation
Enable mouse drag to simulate touch on desktop.
<!-- Disable mouse drag -->
<div data-swf-element="list" data-swf-touch="false">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-touch | simulateTouch | boolean | true |
Active Slide Class
Customize the class applied to the active slide.
<div data-swf-element="list" data-swf-active-class="is-current">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-active-class | slideActiveClass | string | "swiper-slide-active" |
Easing
Control the transition easing function.
<div data-swf-element="list" data-swf-ease="ease-in-out">
<!-- Or use cubic-bezier -->
<div data-swf-element="list" data-swf-ease="cubic-bezier(0.25, 0.1, 0.25, 1)">| Attribute | Type | Default | Values |
|---|---|---|---|
data-swf-ease | string | "ease-out" | "ease", "ease-in", "ease-out", "ease-in-out", "linear", or cubic-bezier(...) |
Complete Example
A complete example using multiple basic attributes:
<div data-swf-component="featured-carousel">
<div data-swf-element="wrapper">
<div
data-swf-element="list"
data-swf-visible="3"
data-swf-gap="24"
data-swf-loop="true"
data-swf-speed="500"
data-swf-centered="true"
>
<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 data-swf-element="item">Slide 4</div>
<div data-swf-element="item">Slide 5</div>
</div>
</div>
</div>