Carousel

Carousels cycle through a series of content, images, or slides with automatic advancement and navigation controls. The component auto-initializes from .ms-carousel markup when mcgowan.js is loaded.

Basic example

<div class="ms-carousel" data-interval="5000" data-pause="true">
  <div class="ms-carousel-inner">
    <div class="ms-carousel-item active">...</div>
    <div class="ms-carousel-item">...</div>
  </div>
  <button class="ms-carousel-control-prev">←</button>
  <button class="ms-carousel-control-next">→</button>
  <div class="ms-carousel-indicators">
    <button class="ms-carousel-indicator active"></button>
    <button class="ms-carousel-indicator"></button>
  </div>
</div>

Options

Attribute	Default	Description
`data-interval`	`5000`	Auto-advance interval in milliseconds. Set to `0` to disable.
`data-pause`	`true`	Pause auto-advance while hovering the carousel.
`data-wrap`	`true`	Wrap around to the first/last slide at the ends.

The component is also exposed programmatically on the global API:

const carousel = document.querySelector('.ms-carousel');
const mc = new McGowanStyle.carousel.McGowanCarousel(carousel, { interval: 3000, pause: true });