--- layout: modules title: Mobify.js Carousel Module Examples description: See examples of the Mobify.js rotating content carousel module in action, including the sample code snippets. ---
Examples of the rotating image carousel module in action. Sample code provided!
To use any of the following examples be sure to include carousel.css (required styles for basic use) and carousel-style.css (styles for common use cases).
Most of the examples on this page can be used immediately without any additional styles.
Carousel with Previous / Next controls to advance between items.
<div class="m-carousel m-fluid m-carousel-photos">
<div class="m-carousel-inner">
<div class="m-item">
<img src="image1.jpg">
</div>
<div class="m-item">
<img src="image2.jpg">
</div>
<div class="m-item">
<img src="image3.jpg">
</div>
</div>
<div class="m-carousel-controls">
<a href="#" data-slide="prev">‹ Previous</a>
<a href="#" data-slide="next">Next ›</a>
</div>
</div>
Bulleted indicators for number of items and currently-selected item. Click to advance between items.
<div class="m-carousel m-fluid m-carousel-photos">
<div class="m-carousel-inner">
<div class="m-item">
<img src="image1.jpg">
</div>
<div class="m-item">
<img src="image2.jpg">
</div>
<div class="m-item">
<img src="image3.jpg">
</div>
</div>
<div class="m-carousel-controls m-carousel-bulleted">
<a href="#" data-slide="1">1</a>
<a href="#" data-slide="2">2</a>
<a href="#" data-slide="3">3</a>
</div>
</div>
Numbered pagination controls for each item, with flanking Previous / Next controls.
<div class="m-carousel m-fluid m-carousel-photos">
<div class="m-carousel-inner">
<div class="m-item">
<img src="image1.jpg">
</div>
<div class="m-item">
<img src="image2.jpg">
</div>
<div class="m-item">
<img src="image3.jpg">
</div>
</div>
<div class="m-carousel-controls m-carousel-pagination">
<a href="#" data-slide="prev">Previous</a>
<a href="#" data-slide="1">1</a>
<a href="#" data-slide="2">2</a>
<a href="#" data-slide="3">3</a>
<a href="#" data-slide="next">Next</a>
</div>
</div>
Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.
<div class="m-carousel m-fluid m-carousel-photos">
<div class="m-carousel-inner">
<div class="m-item">
<img src="image1">
</div>
<div class="m-item">
<img src="image2">
</div>
<div class="m-item">
<img src="image3">
</div>
</div>
<div class="m-carousel-controls m-carousel-hud">
<a class="m-carousel-prev" href="#" data-slide="prev">Previous</a>
<a class="m-carousel-next" href="#" data-slide="next">Next</a>
</div>
</div>
Image carousel containing textual captions with simple Previous / Next controls to advance between items.
Fox Glacier
Wall Centre Blossoms
Helmets
Parliament Buildings
Pods
<div class="m-carousel m-fluid m-carousel-photos">
<div class="m-carousel-inner">
<div class="m-item">
<img src="image1.jpg">
<p class="m-caption">Caption #1</p>
</div>
<div class="m-item">
<img src="image2.jpg">
<p class="m-caption">Caption #2</p>
</div>
<div class="m-item">
<img src="image3.jpg">
<p class="m-caption">Caption #3</p>
</div>
</div>
Items can be stretched to fit the viewport, or they can be sized individually like in this example.
In this example, we've used the included .m-card-light
class to give the element a background and border.
You will have to to size the element or it's content yourself.
Blossoms
Glacier
Helmets
Parliament
Pods
<div class="m-carousel m-center m-fade-out">
<div class="m-carousel-inner">
<div class="m-item">
<div class="m-card-light">
<img src="image1.jpg">
<p class="m-caption">Caption #1</p>
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<img src="image2.jpg">
<p class="m-caption">Caption #2</p>
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<img src="image3.jpg">
<p class="m-caption">Caption #3</p>
</div>
</div>
</div>
Display the current item larger than the rest, and animate the transition between each with the .m-scaled
class.
Blossoms
Fox Glacier
Helmets
Parliament
Pods
<div class="m-carousel m-center m-scaled m-fade-out">
<div class="m-carousel-inner">
<div class="m-item">
<div class="m-card-light">
<img src="image1.jpg">
<p class="m-caption">Caption #1</p>
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<img src="image2.jpg">
<p class="m-caption">Caption #2</p>
</div>
</div>
<div class="m-item">
<div class="m-card-light">
<img src="image3.jpg">
<p class="m-caption">Caption #3</p>
</div>
</div>
</div>
Arbitrary content carousel with simple Previous / Next controls to advance between items.
We used the included class .m-card-dark
to give each element a background.
These elements are automatically sized by the .m-fluid
class to be full width.
Retro blog cliche, direct trade fingerstache keffiyeh twee. Bicycle rights blog mustache, williamsburg scenester flexitarian cred twee pour-over letterpress pork belly. Beard williamsburg authentic fanny pack bespoke helvetica.
Brooklyn flexitarian street art bespoke wolf. Trust fund carles butcher pickled chillwave. Banksy 3 wolf moon seitan kale chips, cosby sweater butcher vice small batch raw denim post-ironic beard. Mcsweeney's thundercats brooklyn.
<div class="m-carousel m-fluid">
<div class="m-carousel-inner">
<div class="m-item">
<div class="m-card-dark">
<h3>Heading 1</h3>
<p>Slide content 1</p>
</div>
</div>
<div class="m-item">
<div class="m-card-dark">
<h3>Heading 2</h3>
<p>Slide content 2</p>
</div>
</div>
</div>