Autoplay
Automatically advance slides at a set interval
Automatically advance slides at a set interval.
Enable Autoplay
<div data-swf-element="list" data-swf-autoplay="true">| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-autoplay | autoplay.enabled | boolean | false |
Autoplay Delay
Set the time between slide transitions:
<div
data-swf-element="list"
data-swf-autoplay="true"
data-swf-autoplay-delay="5000"
>| Attribute | Swiper Property | Type | Default |
|---|---|---|---|
data-swf-autoplay-delay | autoplay.delay | number | 3000 |
Value is in milliseconds. 5000 = 5 seconds between slides.
Example: Testimonial Slider
A common use case — testimonials that auto-rotate:
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<div
data-swf-element="list"
data-swf-autoplay="true"
data-swf-autoplay-delay="5000"
data-swf-loop="true"
data-swf-effect="fade"
>
<div data-swf-element="item">
<blockquote>
"This product changed my life!"
</blockquote>
<cite>— Happy Customer</cite>
</div>
<div data-swf-element="item">
<blockquote>
"Best purchase I've ever made."
</blockquote>
<cite>— Satisfied Client</cite>
</div>
<div data-swf-element="item">
<blockquote>
"Incredible quality and service."
</blockquote>
<cite>— Loyal User</cite>
</div>
</div>
</div>
</div>Example: Hero Banner Slideshow
Auto-playing hero images:
<div data-swf-component="slider">
<div data-swf-element="wrapper">
<div
data-swf-element="list"
data-swf-autoplay="true"
data-swf-autoplay-delay="4000"
data-swf-loop="true"
data-swf-speed="800"
data-swf-effect="fade"
>
<div data-swf-element="item">
<img src="hero-1.jpg" alt="Hero 1" />
</div>
<div data-swf-element="item">
<img src="hero-2.jpg" alt="Hero 2" />
</div>
<div data-swf-element="item">
<img src="hero-3.jpg" alt="Hero 3" />
</div>
</div>
</div>
<div data-swf-element="pagination">
<button data-swf-element="pagination-dot" class="hero-dot"></button>
</div>
</div>Tips
Combine with loop: Autoplay works best with data-swf-loop="true" for seamless cycling.
- Consider accessibility: Some users may find autoplay distracting. Consider providing controls to pause
- Match speed to delay: If your transition speed is 800ms and delay is 3000ms, the total cycle time per slide is 3800ms
- Use with effects: Autoplay pairs nicely with the
fadeeffect for smooth background slideshows