Carousel

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

<swiper-container
  class="max-w-full w-full flex overflow-hidden"
  grid-rows="1"
  mousewheel-force-to-axis="true"
  navigation="true"
  pagination-type="fraction"
  scrollbar="false"
  slides-per-view="auto"
  space-between="0"
>
  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
</swiper-container>

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

Product Carousel

Combi-instrument MFA+

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

Combi-instrument MFA+

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

Combi-instrument MFA+

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

Combi-instrument MFA+

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

Combi-instrument MFA+

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

<div class="bg-white rounded-lg p-4 w-full">
  <swiper-container
    class="flex w-full max-w-full"
    grid-rows="1"
    mousewheel-force-to-axis="true"
    navigation="false"
    scrollbar="false"
    slides-per-view="auto"
    space-between="0"
  >
    <swiper-slide
      class="carousel-product-tile"
    >
      <ProductTile productObject={productObject} />
    </swiper-slide>
    ...
  </swiper-container>
</div>

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:

CSS Shortcuts