Minimal jQuery Responsive Infinite Carousel Plugin - t3u Carousel

Just another jQuery slider plugin to create an infinite loop carousel that allows to slide any html elements and works perfectly with mobile & desktop.

Features:

• Start slider automatically.
• Order slider items randomly.
• Slide from left to right, or from right to left.
• Auto slider pause on hover.
• Customizable slide animation's speed and interval.

How to use it:

1. Wrap the slider items in the wrapper.

<div class="carousel-wrapper carousel-theme-dark">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
</ul>
</div>

2. Add the following CSS snippet in your CSS file.

.carousel-wrapper {
overflow: hidden;
-webkit-box-sizing: border-box;
/* Android ≤ 2.3, iOS ≤ 4 */

-moz-box-sizing: border-box;
/* Firefox 1+ */

box-sizing: border-box;/* Chrome, IE 8+, Opera, Safari 5.1 */

}
.carousel-wrapper > * {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.carousel-wrapper > * > * {
display: block;
float: left;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
/* Android ≤ 2.3, iOS ≤ 4 */

-moz-box-sizing: border-box;
/* Firefox 1+ */

box-sizing: border-box;/* Chrome, IE 8+, Opera, Safari 5.1 */

}
.carousel-wrapper > *:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0%;
line-height: 0%;
}
.carousel-theme-dark {
width: 96%;
margin: 2%;
border: 1px solid #121212;
}
.carousel-theme-dark > * {
background-color: #262626;
}
.carousel-theme-dark > * > * {
padding: 10px;
border: 1px solid #121212;
background-color: #262626;
color: #ffffff;
text-align: center;
}

3. Load the jQuery library and jQuery t3u Carousel plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.carousel.min.js"></script>

4. Set the options in the javascript or using data-carousel attribute in the UL tag.

<ul data-carousel='{
"reverse": false,     // Should either be left or right
"animationSpeed": 300,// Speed in milliseconds
"random": false,      // Should the items be order randomly?
"auto": true, // Start slider automatically
"interval": 2500,     // Time to wait in milliseconds before next slide
"POH": false, // Should the auto slider pause on hover?
"width": 200, // The perfect width
"height": null,       // The height
"keepProportions": false,     // Keep the proportions between the width and the height
"keyNav": false       // Should it be possible to navigate with the arrow keys?
}'>

---

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