Carousel
Example
<div
class="carousel"
data-nav="true"
data-type="contain"
>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-supernav_academics.jpg"
data-title="Thumb Title 1"
data-subtitle="Thumb Title 1"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-supernav_academics.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-supernav_campus.jpg"
data-title="Thumb Title 2"
data-subtitle="Thumb Title 2"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-supernav_campus.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-supernav_giving.jpg"
data-title="Thumb Title 3"
data-subtitle="Thumb Title 3"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-supernav_giving.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-supernav_athletics.jpg"
data-title="Thumb Title 4"
data-subtitle="Thumb Title 4"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-supernav_athletics.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-hero_news_article.jpg"
data-title="Thumb Title 5"
data-subtitle="Thumb Title 5"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-hero_news_article.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-supernav_news.jpg"
data-title="Thumb Title 6"
data-subtitle="Thumb Title 6"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-supernav_news.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
<div
class="carousel-item"
data-thumb="assets/images/mountunion-template-hero_grad.jpg"
data-title="Thumb Title 7"
data-subtitle="Thumb Title 7"
>
<div class="media">
<video
title="Welcome to Mount Union"
poster="assets/images/mountunion-template-hero_grad.jpg"
data-object-fit="cover"
>
<source
type="video/mp4"
src="/assets/video/mountunion.mp4"
/>
<track
src="assets/video/mountunion.en.vtt"
srclang="en"
label="English"
kind="subtitles"
type="text/vtt"
>
</video>
</div>
</div>
</div>