Navigation & Pagination
Add navigation arrows and pagination dots to your sliders
Add navigation arrows and pagination dots to your sliders.
Navigation Arrows
To add previous/next arrow buttons:
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<div data-swf-element="list">
<!-- slides -->
</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>Navigation Elements
| Element | Attribute | Required |
|---|---|---|
| Container | data-swf-element="navigation" | Yes |
| Previous | data-swf-element="prev-arrow" | Yes |
| Next | data-swf-element="next-arrow" | Yes |
Both arrow elements must be present inside the navigation container for navigation to work.
Navigation Placement
The navigation element should be:
- Inside the
data-swf-componentcontainer - Outside the
data-swf-element="wrapper"element
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<!-- wrapper content -->
</div>
<!-- Navigation goes here, outside wrapper -->
<div data-swf-element="navigation">
...
</div>
</div>Styling Navigation
Style your arrows however you like — SwiperFlow doesn't add any default styles:
<div data-swf-element="navigation" class="slider-nav">
<button data-swf-element="prev-arrow" class="nav-arrow nav-prev">
<svg><!-- arrow icon --></svg>
</button>
<button data-swf-element="next-arrow" class="nav-arrow nav-next">
<svg><!-- arrow icon --></svg>
</button>
</div>Pagination Dots
To add pagination (bullet dots):
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<div data-swf-element="list">
<!-- slides -->
</div>
</div>
<div data-swf-element="pagination">
<button data-swf-element="pagination-dot"></button>
</div>
</div>Pagination Elements
| Element | Attribute | Required |
|---|---|---|
| Container | data-swf-element="pagination" | Yes |
| Dot Template | data-swf-element="pagination-dot" | Yes |
The pagination dot serves as a template. SwiperFlow uses its class name and creates copies for each slide.
Active State
The active pagination dot receives the is-active class:
.pagination-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
}
.pagination-dot.is-active {
background: #333;
}Pagination Placement
Like navigation, pagination should be inside the component but outside the wrapper:
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<!-- wrapper content -->
</div>
<div data-swf-element="pagination">
<button data-swf-element="pagination-dot" class="pagination-dot"></button>
</div>
</div>Using Both Navigation and Pagination
You can use navigation and pagination together:
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<div data-swf-element="list" data-swf-loop="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>
</div>
<div data-swf-element="navigation">
<button data-swf-element="prev-arrow">←</button>
<button data-swf-element="next-arrow">→</button>
</div>
<div data-swf-element="pagination">
<button data-swf-element="pagination-dot" class="dot"></button>
</div>
</div>Keyboard Navigation
Enable keyboard arrow key navigation:
<div data-swf-element="list" data-swf-keyboard="true">| Attribute | Type | Default |
|---|---|---|
data-swf-keyboard | boolean | false |
When enabled, users can navigate slides using left/right (or up/down for vertical sliders) arrow keys.
Keyboard Options
<!-- Only enable keyboard when slider is in viewport -->
<div
data-swf-element="list"
data-swf-keyboard="true"
data-swf-keyboard-only-in-viewport="true"
>
<!-- Enable Page Up/Down for navigation -->
<div
data-swf-element="list"
data-swf-keyboard="true"
data-swf-keyboard-page-up-down="true"
>Complete Example
<div data-swf-component class="testimonial-slider">
<div data-swf-element="wrapper">
<div
data-swf-element="list"
data-swf-loop="true"
data-swf-speed="500"
data-swf-keyboard="true"
>
<div data-swf-element="item" class="testimonial-slide">
<p>"Great product!"</p>
<span>— Customer 1</span>
</div>
<div data-swf-element="item" class="testimonial-slide">
<p>"Amazing service!"</p>
<span>— Customer 2</span>
</div>
<div data-swf-element="item" class="testimonial-slide">
<p>"Highly recommend!"</p>
<span>— Customer 3</span>
</div>
</div>
</div>
<div data-swf-element="navigation" class="testimonial-nav">
<button data-swf-element="prev-arrow" class="nav-btn">
← Previous
</button>
<button data-swf-element="next-arrow" class="nav-btn">
Next →
</button>
</div>
<div data-swf-element="pagination" class="testimonial-dots">
<button data-swf-element="pagination-dot" class="dot"></button>
</div>
</div>