Minimal jQuery Responsive Infinite Carousel Plugin - t3u Carousel
File Size: | 39.5KB |
---|---|
Views Total: | 1499 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.