# Carousel

**Path:** Components/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Carousel

 RbCarousel is a touch-enabled slider component for cycling through slides.
 Perfect for image galleries, product showcases, testimonials, and feature tours.

 Basic Usage

 Simple carousel with different content types including images and cards.

 Show code

 Simple Carousel

 Basic carousel with colored slides. Swipe or use dots to navigate.

 Slide 1

 Slide 2

 Slide 3

 Image Carousel

 Carousel with placeholder images for gallery use cases.

 Image 1

 Image 2

 Image 3

 Card Carousel

 Carousel containing card-style content.

 Getting Started

 Quick setup guide to start using RubicBlazor components.

 Components

 Explore 50+ ready-to-use UI components for your projects.

 Theming

 Customize colors, fonts, and styles to match your brand.

 Auto Play

 Automatic slide transitions with configurable intervals and pause on hover.

 Show code

 Auto Play with Pause on Hover

 Carousel automatically advances every second. Hover to pause.

 Slide 1

 Slide 2

 Slide 3

 Slide 4

 Slower Auto Play

 Advances every 3 seconds for a more relaxed experience.

 Morning

 Afternoon

 Night

 Without Pause on Hover

 Continuous auto play that doesn't pause when hovered.

 Vertical

 Vertical sliding direction for testimonials and notification-style content.

 Show code

 Vertical Carousel

 Slides transition vertically instead of horizontally. Swipe up/down to navigate.

 Slide 1

 Slide 2

 Slide 3

 Slide 4

 Vertical with Auto Play

 Vertical carousel with automatic transitions.

 Swipe Up

 Or Tap Dots

 Swipe Down

 Testimonials Style

 Vertical carousel for customer testimonials.

 "Amazing components! Saved us weeks of development time."

 - John D., Developer 

 "The best Blazor UI library I've used. Highly recommended!"

 - Sarah M., Tech Lead 

 "Clean API, great documentation, excellent support."

 - Mike R., Architect 

 Navigation Dots

 Control visibility of navigation dots for cleaner hero sections.

 Show code

 Hidden Dots

 Navigation dots are hidden. Use swipe gestures to navigate.

 Slide 1

 Slide 2

 Slide 3

 Slide 4

 Comparison

 Side by side: with dots (default) vs without dots.

 With Dots (default) 
 1

 2

 3

 Without Dots 
 1

 2

 3

 Full-Width Hero Slider

 Clean hero section without navigation dots.

 Welcome to Our Platform

 Build amazing applications

 Powerful Components

 50+ ready-to-use UI elements

 Get Started Today

 Free and open source

 Loop Behavior

 Seamless infinite looping with cloned slides for smooth transitions.

 Show code

 Loop with Clone

 Creates clone slides for seamless infinite looping. Swipe continuously without jumping.

 1

 Swipe right 

 2

 Keep going 

 3

 Seamless loop 

 Comparison: Loop vs Loop with Clone

 Notice the difference when swiping past the last slide.

 Standard Loop (jumps back) 
 A

 B

 C

 Loop with Clone (seamless) 
 A

 B

 C

 Infinite Product Slider

 Seamless product showcase with auto-play.

 Laptop Pro

 $1,299 

 Phone Max

 $999 

 Headphones

 $349 

 Smart Watch

 $449 

 No Loop

 Non-looping carousel for wizards and step-by-step navigation.

 Show code

 No Loop

 Carousel stops at first and last slides. Cannot swipe past boundaries.

 First

 Cannot go back 

 Middle

 Swipe both ways 

 Last

 Cannot go forward 

 Wizard / Step Navigation

 Non-looping carousel is ideal for step-by-step wizards.

 1

 Welcome

 Start your journey here

 2

 Setup

 Configure your preferences

 3

 Complete

 You're all set!

 Comparison: Loop vs No Loop

 Try swiping past the last slide in each carousel.

 With Loop (default) 
 1

 2

 3

 No Loop (stops at ends) 
 1

 2

 3

 Readonly / Disabled

 Control user interaction with readonly and disabled states.

 Show code

 Interactive Demo

 Toggle Readonly and Disabled states to see the difference.

 Readonly 

 Disabled 

 Slide 1

 Slide 2

 Slide 3

 Slide 4

 State Comparison

 Side by side comparison of normal, readonly, and disabled states.

 Normal 
 1

 2

 Readonly 
 1

 2

 Disabled 
 1

 2

 Auto Play with Disabled State

 Disabled carousel can still auto-play but user interaction is blocked.

 Auto-playing

 Can't swipe

 View only

 Use Cases

 Real-world examples: product galleries, feature tours, team showcases, and news sliders.

 Show code

 Product Gallery

 E-commerce product image showcase.

 Classic T-Shirt

 $29.99 

 Running Shoes

 $89.99 

 Summer Hat

 $24.99 

 Feature Tour

 Onboarding carousel to showcase app features.

 Fast & Lightweight

 Optimized for performance 

 Fully Customizable

 Match your brand perfectly 

 Mobile First

 Touch-friendly interactions 

 Team Members

 Showcase team with auto-rotating cards.

 John Smith

 CEO & Founder 

 Sarah Johnson

 Lead Developer 

 Mike Davis

 UX Designer 

 News / Blog Slider

 Latest articles or news cards.

 Jan 15, 2026 
 Getting Started with Blazor

 Learn the basics of building web apps...

 Jan 20, 2026 
 Component Architecture

 Best practices for organizing your code...

 Jan 25, 2026 
 Performance Tips

 Optimize your Blazor applications...

 RTL Support

 Show carousel content inside a local RTL container with Arabic slide content.

 Show code

 شريط عروض داخل حاوية RTL

 يوضح هذا المثال أن الشرائح والمحتوى العربي يعملان بشكل صحيح داخل حاوية RTL محلية.

 إطلاق سريع

 ابدأ العمل بسرعة باستخدام مكونات جاهزة وتجربة استخدام واضحة.

 دعم اللغات

 المحتوى العربي واتجاه RTL يمكن عرضهما داخل جزء محدد من الشاشة.

 محتوى مرن

 يمكن استخدام الصور أو البطاقات أو الرسائل التعريفية ضمن نفس الشريط.

 ✕

 Contents