Pro Feature
Slider is a premium element that requires a Pro or Agency license. Activate your license to use this element.
Overview
The Slider element displays images in a carousel/slideshow format. It supports autoplay with configurable speed, navigation via arrows and dots, and smooth transition effects between slides.
Default classes applied to the Slider element:
relative– Positioning context for navigation controlsoverflow-hidden– Clips slides during transitionsrounded– Subtle border radius
The Slider is ideal for hero sections, image showcases, testimonial rotations, and product highlights. It provides smooth transitions and touch/swipe support for mobile devices.
Settings
Configure the Slider element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Images | Array of image URLs for slides. Click "Add Images" to open the Media Library or paste external URLs. | [] (empty) |
| Autoplay | Automatically advance slides at regular intervals. Ideal for hero banners and image showcases. | true |
| Autoplay Speed | Milliseconds between automatic slide transitions. Lower values create faster rotations (e.g., 3000 = 3 seconds). | 5000 (5 seconds) |
| Show Arrows | Display previous/next navigation arrows on the sides of the slider for manual navigation. | true |
| Show Dots | Display slide indicator dots below the slider. Users can click dots to jump to specific slides. | true |
| Pause on Hover | Pause autoplay when the mouse hovers over the slider. Resumes when the mouse leaves. | true |
| Aspect Ratio | Slide container aspect ratio. Options include aspect-[16/9], aspect-[4/3], aspect-[21/9] for ultrawide, or aspect-square. |
aspect-[16/9] |
| Transition | Slide transition effect. Options: slide (horizontal movement) or fade (crossfade between images). |
slide |
Examples
Hero Slider with Autoplay
A full-width hero slider that automatically cycles through images every 5 seconds. Perfect for showcasing key messages or featured content.
<div class="relative overflow-hidden rounded" x-data="slider({ autoplay: true, speed: 5000 })">
<div class="flex transition-transform duration-500 aspect-[16/9]">
<img src="/images/hero-1.jpg" alt="Slide 1" class="w-full flex-shrink-0 object-cover">
<img src="/images/hero-2.jpg" alt="Slide 2" class="w-full flex-shrink-0 object-cover">
<img src="/images/hero-3.jpg" alt="Slide 3" class="w-full flex-shrink-0 object-cover">
</div>
<!-- Arrow Navigation -->
<button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<!-- Dot Navigation -->
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
<button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white"></button>
<button class="w-3 h-3 rounded-full bg-white"></button>
<button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white"></button>
</div>
</div>Testimonial Slider Without Arrows
A cleaner slider display using only dot navigation. Ideal for testimonials or content where arrows might distract from the message.
<div class="relative overflow-hidden rounded-lg" x-data="slider({ autoplay: true, speed: 4000 })">
<div class="flex transition-transform duration-500">
<div class="w-full flex-shrink-0 p-8 text-center">
<blockquote class="text-xl italic text-gray-700">
"This product changed our workflow completely."
</blockquote>
<p class="mt-4 font-semibold">John Doe, CEO</p>
</div>
<div class="w-full flex-shrink-0 p-8 text-center">
<blockquote class="text-xl italic text-gray-700">
"Incredible support and amazing features."
</blockquote>
<p class="mt-4 font-semibold">Jane Smith, Designer</p>
</div>
</div>
<!-- Dot Navigation Only -->
<div class="flex justify-center gap-2 mt-4">
<button class="w-2 h-2 rounded-full bg-gray-300 hover:bg-gray-500"></button>
<button class="w-2 h-2 rounded-full bg-gray-500"></button>
</div>
</div>Product Slider with Custom Aspect Ratio
A product showcase slider with square aspect ratio for consistent product image display.
<div class="relative overflow-hidden rounded max-w-md mx-auto" x-data="slider({ autoplay: false })">
<div class="flex transition-transform duration-500 aspect-square">
<img src="/images/product-1.jpg" alt="Product view 1" class="w-full flex-shrink-0 object-cover">
<img src="/images/product-2.jpg" alt="Product view 2" class="w-full flex-shrink-0 object-cover">
<img src="/images/product-3.jpg" alt="Product view 3" class="w-full flex-shrink-0 object-cover">
<img src="/images/product-4.jpg" alt="Product view 4" class="w-full flex-shrink-0 object-cover">
</div>
<!-- Thumbnail Navigation -->
<div class="flex gap-2 mt-4">
<button class="w-16 h-16 rounded border-2 border-blue-500 overflow-hidden">
<img src="/images/product-1-thumb.jpg" alt="" class="w-full h-full object-cover">
</button>
<button class="w-16 h-16 rounded border-2 border-transparent hover:border-gray-300 overflow-hidden">
<img src="/images/product-2-thumb.jpg" alt="" class="w-full h-full object-cover">
</button>
<button class="w-16 h-16 rounded border-2 border-transparent hover:border-gray-300 overflow-hidden">
<img src="/images/product-3-thumb.jpg" alt="" class="w-full h-full object-cover">
</button>
<button class="w-16 h-16 rounded border-2 border-transparent hover:border-gray-300 overflow-hidden">
<img src="/images/product-4-thumb.jpg" alt="" class="w-full h-full object-cover">
</button>
</div>
</div>
Accessibility Tip
Enable Pause on Hover and Show Arrows to give users control over the slideshow. This helps users who need more time to read content or who prefer manual navigation.