The mod.carousel() method automatically attaches event listeners for all <div class="mod-carousel"></div> elements on the page and handles keyboard and click events for each carousel.
Method API
// Using mod(-plus).iife.min.js
window.mod.carousel();
// Using mod(-plus).esm.min.js
import { carousel } from 'path/to/mod(-plus).esm.min.js';
carousel();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Carousel HTML
<div class="mod-carousel">
<div class="mod-carousel-list-wrapper">
<div class="mod-carousel-navigation-arrows">
<button class="mod-carousel-navigation-previous"><i class="mod-icon-chevron-left"></i></button>
<button class="mod-carousel-navigation-next"><i class="mod-icon-chevron-right"></i></button>
</div>
<ul class="mod-carousel-list">
<!-- Replace content in <li> tags here with your own images or other content. -->
<li><img src="https://picsum.photos/1200/800?t=a1738016952017" /></li>
<li><img src="https://picsum.photos/1200/800?t=b1738016952017" /></li>
<li><img src="https://picsum.photos/1200/800?t=c1738016952017" /></li>
<li><img src="https://picsum.photos/1200/800?t=d1738016952017" /></li>
<li><img src="https://picsum.photos/1200/800?t=e1738016952017" /></li>
</ul>
</div>
<nav class="mod-carousel-navigation">
<ol class="mod-carousel-navigation-items"></ol>
</nav>
</div>Carousel JavaScript
window.mod.carousel();