Simple jQuery & jQuery Mobile Based Carousel Plugin - JQM-Carousel

JQM-Carousel is a jQuery & jQuery mobile plugin for building a simple clean, mobile-first image carousel for your mobile web app. Supports image caption, dots navigation, swipe to slide and more.

More features:

• Easy to use.
• Supports image captions using html heading tags.
• Dost navigation.
• Swipe to slide.
• Infinite loop.

How to use it:

1. Include the jQuery library and jQuery mobile's javascript and CSS in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>

2. Include JQM-Carousel plugin after jQuery javascript library.

<script src="jqm.carousel.js"></script>

3. Create a mobile image carousel using unordered list and data-option attributes to set the options.

<ul data-role="carousel" data-captions="true" data-inset="true" data-shadow="true">
<li><a href="#"><img alt="" src="1.jpg"/><h1>Title 1</h1></a></li>
<li><a href="#"><img alt="" src="2.jpg"/><h1>Title 2</h1></a></li>
<li><a href="#"><img alt="" src="3.jpg"/><h1>Title 3</h1></a></li>
...

</ul>

4. The sample CSS to style the image carousel.

.ui-carousel {
list-style: none outside none;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
width: auto;
height: inherit;
min-height: inherit;
overflow: hidden;
outline: 0;
}
.ui-carousel li {
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
display: none;
list-style: none outside none;
overflow: inherit;
position: absolute;
width: 100%;
}
.ui-carousel-inset {
margin: 1em auto;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.ui-carousel li.ui-carousel-transitioning {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ui-carousel li.ui-carousel-active {
display: block;
}
.ui-carousel li a {
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
overflow: inherit;
}
.ui-carousel img {
width: 100%;
display: block;
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
min-height: inherit;
}
.ui-carousel-controls {
text-align: center;
}
.ui-carousel-controls .ui-radio {
display: inline-block;
padding: 0 .25em;
}
.ui-carousel-controls .ui-radio label:after {
left: .2em;
}
.ui-carousel-captions .ui-carousel-captions-heading {
margin: 0;
padding: 0;
}
.ui-carousel-captions-content {
left: 0;
margin: 0;
padding: 0.5em 0;
position: absolute;
right: 0;
}
.ui-carousel-captions-bottom {
bottom: 0;
}
.ui-carousel-captions-top {
top: 0;
}

5. More options with default values.

thumbnail: false,
enhanced: false,
handles: null,
barrel: null,
bullets: true,
bulletsPos: "bottom",
transition: "slide",
thumbnails: false

Change log:

2014-03-25

• update.

2014-03-24

• update.

2014-03-21

• fixed flex layout, working on transitions

2014-03-07

• added thumbnail option:

2014-03-03

• WIP commit enabling handles and thumbnail options

2014-03-02

• fix transitions, switch to CSS caption positioning

2014-03-01

• updated events, direction, class assignment

---

This awesome jQuery plugin is developed by frequent. For more Advanced Usages, please check the demo page or visit the official website.