Default Gray Amethyst

Carousel Item

<mo-carousel-item> | MOCarouselItem
Since 3.0 experimental

A carousel item represent a slide within a carousel.

A snowy winter day at a quarry. Sun shines on the mining machine in a quarry. A busy city viewed from above. P A large quarry for mining salt. A conveyor belt moving rocks in Lehigh Hanson. 
<mo-carousel pagination navigation mouse-dragging loop>
  <mo-carousel-item>
    <img alt="A snowy winter day at a quarry." src="/assets/examples/carousel/winter-quarry.webp" />
  </mo-carousel-item>
  <mo-carousel-item>
    <img alt="Sun shines on the mining machine in a quarry." src="/assets/examples/carousel/sun-quarry.webp" />
  </mo-carousel-item>
  <mo-carousel-item>
    <img alt="A busy city viewed from above." src="/assets/examples/carousel/busy-city.webp" /> </mo-carousel-item
  >P
  <mo-carousel-item>
    <img alt="A large quarry for mining salt." src="/assets/examples/carousel/salt-quarry.webp" />
  </mo-carousel-item>
  <mo-carousel-item>
    <img alt="A conveyor belt moving rocks in Lehigh Hanson." src="/assets/examples/carousel/lehigh-hanson.webp" />
  </mo-carousel-item>
</mo-carousel>

import MOCarousel from '@metsooutotec/modes-web-components/dist/react/carousel';
import MOCarouselItem from '@metsooutotec/modes-web-components/dist/react/carousel-item';

const App = () => (
  <>
    <MOCarousel pagination mouse-dragging>
      <MOCarouselItem>
        <img alt="A snowy winter day at a quarry." src="/assets/examples/carousel/winter-quarry.webp" />
      </MOCarouselItem>
      <MOCarouselItem>
        <img alt="Sun shines on the mining machine in a quarry." src="/assets/examples/carousel/sun-quarry.webp" />
      </MOCarouselItem>
      <MOCarouselItem>
        <img alt="A busy city viewed from above." src="/assets/examples/carousel/busy-city.webp" />
      </MOCarouselItem>
      <MOCarouselItem>
        <img alt="A large quarry for mining salt." src="/assets/examples/carousel/salt-quarry.webp" />
      </MOCarouselItem>
      <MOCarouselItem>
        <img alt="A conveyor belt moving rocks in Lehigh Hanson." src="/assets/examples/carousel/lehigh-hanson.webp" />
      </MOCarouselItem>
    </MOCarousel>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/carousel-item/carousel-item.js';

To import this component as a React component:

import MOCarouselItem from '@metsooutotec/modes-web-components/dist/react/carousel-item/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/carousel-item/carousel-item.js"></script>

Slots

Name Description
(default) The carousel item’s content..

Learn more about using slots.

Custom Properties

Name Description Default
--aspect-ratio The slide’s aspect ratio. Inherited from the carousel by default.

Learn more about customizing CSS custom properties.