Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

Carousel

Carousel - modern carousel based on Swiper Element (Web Component)

ABCDA
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#79B8FF">swiper-container</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"max-w-full w-full flex overflow-hidden"</span></span> <span class="line"><span style="color:#B392F0"> grid-rows</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"1"</span></span> <span class="line"><span style="color:#B392F0"> mousewheel-force-to-axis</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"true"</span></span> <span class="line"><span style="color:#B392F0"> navigation</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"true"</span></span> <span class="line"><span style="color:#B392F0"> pagination-type</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"fraction"</span></span> <span class="line"><span style="color:#B392F0"> scrollbar</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"false"</span></span> <span class="line"><span style="color:#B392F0"> slides-per-view</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"auto"</span></span> <span class="line"><span style="color:#B392F0"> space-between</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"0"</span></span> <span class="line"><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"bg-blue-50 p-12 border-1 min-w-full"</span><span style="color:#E1E4E8">>A&#x3C;/</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"bg-blue-100 p-12 border-1 min-w-full"</span><span style="color:#E1E4E8">>B&#x3C;/</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"bg-blue-200 p-12 border-1 min-w-full"</span><span style="color:#E1E4E8">>C&#x3C;/</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"bg-blue-300 p-12 border-1 min-w-full"</span><span style="color:#E1E4E8">>D&#x3C;/</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"bg-blue-400 p-12 border-1 min-w-full"</span><span style="color:#E1E4E8">>A&#x3C;/</span><span style="color:#79B8FF">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#79B8FF">swiper-container</span><span style="color:#E1E4E8">></span></span></code></pre>

Find the code for this page in the src/pages/components/carousel.mdx file.

Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bg-white rounded-lg p-4 w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">swiper-container</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"flex w-full max-w-full"</span></span> <span class="line"><span style="color:#B392F0"> grid-rows</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"1"</span></span> <span class="line"><span style="color:#B392F0"> mousewheel-force-to-axis</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"true"</span></span> <span class="line"><span style="color:#B392F0"> navigation</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"false"</span></span> <span class="line"><span style="color:#B392F0"> scrollbar</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"false"</span></span> <span class="line"><span style="color:#B392F0"> slides-per-view</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"auto"</span></span> <span class="line"><span style="color:#B392F0"> space-between</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"0"</span></span> <span class="line"><span style="color:#E1E4E8"> ></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">swiper-slide</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"carousel-product-tile"</span></span> <span class="line"><span style="color:#E1E4E8"> ></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#FDAEB7;font-style:italic">ProductTile</span><span style="color:#B392F0"> productObject</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">{productObject}</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">swiper-slide</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> ...</span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">swiper-container</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

Props

Both Carousel and ProductCarousel are zero-prop wrappers around <swiper-container>. They render a fixed demo set of slides — drop their markup into your own page and pass slides as children to customize.

Swiper Attributes

Configure behavior via attributes on <swiper-container>. The full list lives in the Swiper Element docs; the most useful ones are:

Attribute Type Description
slides-per-view number | 'auto' Number of visible slides (use auto for variable widths)
space-between number Gap between slides in pixels
navigation boolean Show prev/next arrows
pagination boolean Show pagination dots
pagination-type 'bullets' | 'fraction' | 'progressbar' Pagination style
scrollbar boolean Show draggable scrollbar
mousewheel-force-to-axis boolean Lock mousewheel to scroll axis
grid-rows number Number of slide rows in grid layout

CSS Shortcuts

Class Purpose
carousel-product-tile Slide width sizing for product tiles inside ProductCarousel