Basic jQuery Any Content Carousel Plugin - maxcarousel

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.