Carousel

Basic

<mc-carousel>
  <mc-carousel-item width="170">
    <img alt="landscape" loading="lazy"
      src="..." />
  </mc-carousel-item>
  <mc-carousel-item width="170">
    <img alt="landscape" loading="lazy"
      src="..." />
  </mc-carousel-item>
</mc-carousel>


<!-- Set width directly on item -->
<mc-carousel-item width="170"></mc-carousel-item>

<!-- If no width set and an img is used, then the image width will be used -->
<mc-carousel-item>
  <img src="..." />
</mc-carousel-item>

<!-- If no width is set, the offsetWidth will be used -->
<mc-carousel-item>
  ...
</mc-carousel-item>

Strategies

There are 3 strategies: multi-browser, hero-start, hero-centered

multi-browser

hero-start

hero-center

<!-- multi-browser -->
<mc-carousel>
  <mc-carousel-item width="170">
    <img alt="landscape" loading="lazy"
      src="..." />
  </mc-carousel-item>
</mc-carousel>

<!-- hero-start -->
<mc-carousel strategy="hero-start">
  <mc-carousel-item>
    <img alt="landscape" loading="lazy"
      src="..." />
  </mc-carousel-item>
</mc-carousel>

<!-- hero-center -->
<mc-carousel strategy="hero-center">
  <mc-carousel-item>
    <img alt="landscape" loading="lazy"
      src="..." />
  </mc-carousel-item>

Images and text

Title

<mc-carousel mc-item-width="170" style="height: 180px;">
  <mc-carousel-item width="170">
    <div class="mc-text">
      <div>Title</div>
    </div>
    <img alt="landscape" loading="lazy" src="./img.jpg"/>
  </mc-carousel-item>
  <mc-carousel-item width="170">
    <div class="mc-text">
      <div>Title</div>
    </div>
    <img alt="landscape" loading="lazy" src="./img.jpg"/>
  </mc-carousel-item>
  <mc-carousel-item width="170">
    <div class="mc-text">
      <div>Title</div>
    </div>
    <img alt="landscape" loading="lazy" src="./img.jpg"/>
  </mc-carousel-item>
</mc-carousel>