Basic jQuery Any Content Carousel Plugin - maxcarousel
File Size: | 339 KB |
---|---|
Views Total: | 2819 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

maxcarousel is a tiny yet mobile-friendly jQuery carousel plugin that allows to slide/loop any html content infinitely.
Features:
- Responsive design
- touch swipe / mouse drag to slide the carousel
- Arrows navigation
- Displays multiple items at one time.
- Animated image hover caption.
- 2 transition animations.
- Supports all major browsers.
How to use it:
1. Include the jQuery javascript library together with jQuery maxcarousel's CSS and javascript in the page.
<link rel="stylesheet" href="css/carousel.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/carousel.js"></script>
2. Create an image carousel following the html structure like this:
<div class="maxcarousel"> <!-- Controls --> <span class="maxcarousel__l-arr"></span> <span class="maxcarousel__r-arr"></span> <!-- Carousel --> <div class="maxcarousel__inner"> <ul> <li class="maxcarousel__ul-item-with-link"><img src="img/1.jpg"> <a href="#">Image Caption 1</a> </li> <li class="maxcarousel__ul-item-with-link"><img src="img/2.jpg"> <a href="#">Image Caption 2</a> </li> <li class="maxcarousel__ul-item-with-link"><img src="img/3.jpg"> <a href="#">Image Caption 3</a> </li> ... </ul> </div> </div>
3. Call the plugin with default options.
<script> $('.maxcarousel').maxCarousel({ animation: { animationMargins: false, // Animated margins animationVisibility: false // Animated transitions when scrolling }, rolledElements: 1 // Number of scrollable elements }); </script>
Change log:
2014-04-11
- added fixes for click on mobile devixes
2014-03-27
- update.
2014-03-22
- fixed touch problem for mobile devices
This awesome jQuery plugin is developed by maxim1006. For more Advanced Usages, please check the demo page or visit the official website.