Carousel
Usage
The ShCarousel constructor represents a carousel component that supports rotating slides, navigation control, and automatic slide transitions.
Basic
Carousel Example
Basic Carousel
::ShCarousel
---
title: Carousel Example
subtitle: Basic Carousel
---
:::ShMicroCard
---
layout: flat
icon: lineicons:nasa
urlWrapper: https://www.nasa.gov/
title: NASA
subtitle: Beyond the Frontier
---
:::
:::ShMicroCard
---
layout: flat
icon: gis:earth-euro-africa-o
urlWrapper: https://science.nasa.gov/earth/facts/
title: Earth
subtitle: The Blue Marble
---
:::
:::ShMicroCard
---
layout: flat
icon: streamline-emojis:new-moon
urlWrapper: https://science.nasa.gov/moon/
title: The Moon
subtitle: Earth's Companion
---
:::
:::ShMicroCard
---
layout: flat
icon: game-icons:mars-curiosity
urlWrapper: https://science.nasa.gov/mars/
title: Mars
subtitle: Meet the neighbour
---
:::
::
You can combine components inside the :
This is not recommended because different components can have different styles and it can be difficult to manage the layout and appearance of the carousel. It is better to use a single type of component for consistency and ease of use.
Neil A. Armstrong
Mission Commander
@NASA
Michael Collins
Command Module Pilot
@NASA
Edwin E. Aldrin Jr.
Pilot of the Lunar Lander Eagle
@NASA
::ShCarousel
---
timer: 4
---
:::ShMicroCard
---
layout: flat
icon: game-icons:lunar-module
urlWrapper: https://www.nasa.gov/mission/apollo-11/
title: Apollo 11
subtitle: First Moon Landing- Crew
---
:::
:::ShAvatar
---
srcAvatar: https://endz.in/wp-content/uploads/2020/05/neil-armstrong-9188943-2-402-1024x1024.jpg
altAvatar: Neil Armstrong
name: Neil A. Armstrong
role: Mission Commander
company: NASA
---
:::
:::ShAvatar
---
srcAvatar: https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Michael_Collins_%28S69-31742%2C_restoration%29.jpg/500px-Michael_Collins_%28S69-31742%2C_restoration%29.jpg
altAvatar: Michael Collins
name: Michael Collins
role: Command Module Pilot
company: NASA
---
:::
:::ShAvatar
---
srcAvatar: https://upload.wikimedia.org/wikipedia/commons/9/98/Aldrin_Apollo_11_original.jpg
altAvatar: Buzz Aldrin
name: Edwin E. Aldrin Jr.
role: Pilot of the Lunar Lander Eagle
company: NASA
---
:::
::
Advanced settings
Advanced Carousel Example
Manual Control Over Slides Loop
Neil A. Armstrong
Mission Commander
@NASA
Michael Collins
Command Module Pilot
@NASA
Edwin E. Aldrin Jr.
Pilot of the Lunar Lander Eagle
@NASA
::ShCarousel
---
ui:
wrapper: dark:bg-neutral-800
title: Advanced Carousel Example
subtitle: Manual Control Over Slides Loop
timer: 0 #Disable auto-slide
slides: 2 #Show 2 slides at once
---
:::ShMicroCard
---
layout: flat
icon: game-icons:lunar-module
urlWrapper: https://www.nasa.gov/mission/apollo-11/
title: Apollo 11
subtitle: First Moon Landing- Crew
---
:::
:::ShAvatar
---
srcAvatar: https://endz.in/wp-content/uploads/2020/05/neil-armstrong-9188943-2-402-1024x1024.jpg
altAvatar: Neil Armstrong
name: Neil A. Armstrong
role: Mission Commander
company: NASA
---
:::
:::ShAvatar
---
srcAvatar: https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Michael_Collins_%28S69-31742%2C_restoration%29.jpg/500px-Michael_Collins_%28S69-31742%2C_restoration%29.jpg
altAvatar: Michael Collins
name: Michael Collins
role: Command Module Pilot
company: NASA
---
:::
:::ShAvatar
---
srcAvatar: https://upload.wikimedia.org/wikipedia/commons/9/98/Aldrin_Apollo_11_original.jpg
altAvatar: Buzz Aldrin
name: Edwin E. Aldrin Jr.
role: Pilot of the Lunar Lander Eagle
company: NASA
---
:::
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
slides | number | 1 | Number of slides to show at once; determines how many components are displayed in one view. |
timer | number | 2 | Interval in seconds for automatic slide transitions. Set to `0` to disable auto-transition. |
title | string | '' | Optional title text displayed above the carousel. Styled via `ui.title`. |
subtitle | string | '' | Optional subtitle text shown below the title. Styled via `ui.subtitle`. |
navigationVisible | boolean | true | Controls whether the navigation dots (pagination dots) are displayed below/inside the carousel. |
direction | 'horizontal' | 'vertical' | 'horizontal' | Axis the slides travel along. Use `horizontal` to slide sideways, or `vertical` to slide upwards. |
description | string | '' | Note for content writers. It is not rendered on the website. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | relative w-full | Outermost container of the carousel. |
title | title text-center text-xl md:text-[24px] font-semibold break-words | Styles applied to the title text (e.g. font size, color). |
subtitle | subtitle text-center text-lg md:text-[20px] font-semibold text-neutral-600 dark:text-neutral-300 -mt-5 break-words | Styles applied to the subtitle text (e.g. font size, color). |
inner | overflow-hidden | Defines the styling for the inner sliding container. |
track | grid grid-cols-1 | Styles for the grid that stacks every slide in the same cell, so the carousel is as tall as its tallest slide. |
group | col-start-1 row-start-1 flex justify-center gap-4 | Styles applied to each slide group (the set of components shown together in one view). |
