Interactive
Carousel / Slider
A touch-friendly slider with autoplay, loop, arrows and dots.
Live demo
See it in action
Hero — 1 per view · fade · background image + overlay · autoplay
Cards — 3 per view (2 on tablet) · inline image · slide · autoplay
Two-up — 2 per view · inline · slide · no autoplay (drag / arrows / dots)
-
Build it visually
Drag-and-drop sections, columns and 60+ elements.
-
Free & open source
The framework, theme and every element are free under the GPL.
-
Touch-friendly
Autoplay, loop, arrows, dots and swipe — all configurable.
-
Header & footer builders
Design your chrome visually, then reuse it site-wide.
-
Global templates
Save any section and drop it into any page.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="fw-carousel">
<div class="splide" data-splide="{"type":"loop","perPage":1,"perMove":1,"arrows":true,"pagination":true,"drag":true,"speed":600,"rewind":false,"autoplay":true,"interval":5000,"pauseOnHover":true,"pauseOnFocus":true,"gap":"1rem","height":"460px","fixedHeight":"460px"}" style="--fwc-h:460px">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide fw-carousel__slide fw-carousel__slide--bg"><img class="fw-carousel__bg" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-02ddb29311c5.jpg" alt="" loading="lazy"><span class="fw-carousel__overlay" style="background:rgba(0,0,0,0.45)"></span>
<div class="fw-carousel__content fw-carousel__content--center">
<h2 class="fw-carousel__heading">Build it visually</h2>
<p class="fw-carousel__text">Drag-and-drop sections, columns and 60+ elements.</p>
<a class="fw-carousel__btn btn" href="#">Get started</a>
</div></li>
</ul>
</div>
</div>
</div>
</section>To learn more about the Carousel / Slider shortcode, please check out the online manual here.