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>
<mc-carousel-item width=170></mc-carousel-item>
<mc-carousel-item>
<img src=...>
</mc-carousel-item>
<mc-carousel-item>
...
</mc-carousel-item>
Strategies
There are 3 strategies: multi-browser, hero-start, hero-centered
multi-browser
hero-start
hero-center
<mc-carousel>
<mc-carousel-item width=170>
<img alt=landscape loading=lazy src=...>
</mc-carousel-item>
</mc-carousel>
<mc-carousel strategy=hero-start>
<mc-carousel-item>
<img alt=landscape loading=lazy src=...>
</mc-carousel-item>
</mc-carousel>
<mc-carousel strategy=hero-center>
<mc-carousel-item>
<img alt=landscape loading=lazy src=...>
</mc-carousel-item>
Images and text
Title
Title
Title
Title
Title
Title
Title
Title
Title
<mc-carousel style="height: 180px;" mc-item-width=170>
<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>