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

  • Build it visually

    Drag-and-drop sections, columns and 60+ elements.

    Get started

  • Free & open source

    The framework, theme and every element are free under the GPL.

    Get started

  • Touch-friendly

    Autoplay, loop, arrows, dots and swipe — all configurable.

    Get started

  • Header & footer builders

    Design your chrome visually, then reuse it site-wide.

    Get started

  • Global templates

    Save any section and drop it into any page.

    Get started

Cards — 3 per view (2 on tablet) · inline image · slide · autoplay

  • Build it visually

    Build it visually

    Drag-and-drop sections, columns and 60+ elements.

    Learn more
  • Free & open source

    Free & open source

    The framework, theme and every element are free under the GPL.

    Learn more
  • Touch-friendly

    Touch-friendly

    Autoplay, loop, arrows, dots and swipe — all configurable.

    Learn more
  • Header & footer builders

    Header & footer builders

    Design your chrome visually, then reuse it site-wide.

    Learn more
  • Global templates

    Global templates

    Save any section and drop it into any page.

    Learn more

Two-up — 2 per view · inline · slide · no autoplay (drag / arrows / dots)

  • Build it visually

    Build it visually

    Drag-and-drop sections, columns and 60+ elements.

  • Free & open source

    Free & open source

    The framework, theme and every element are free under the GPL.

  • Touch-friendly

    Touch-friendly

    Autoplay, loop, arrows, dots and swipe — all configurable.

  • Header & footer builders

    Header & footer builders

    Design your chrome visually, then reuse it site-wide.

  • Global templates

    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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="fw-carousel">
					<div class="splide" data-splide="{&quot;type&quot;:&quot;loop&quot;,&quot;perPage&quot;:1,&quot;perMove&quot;:1,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;drag&quot;:true,&quot;speed&quot;:600,&quot;rewind&quot;:false,&quot;autoplay&quot;:true,&quot;interval&quot;:5000,&quot;pauseOnHover&quot;:true,&quot;pauseOnFocus&quot;:true,&quot;gap&quot;:&quot;1rem&quot;,&quot;height&quot;:&quot;460px&quot;,&quot;fixedHeight&quot;:&quot;460px&quot;}" 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>
			</div>
		</div>
	</div>
</section>

To learn more about the Carousel / Slider shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free