Basic jQuery Any Content Carousel Plugin - maxcarousel

File Size: 339 KB
Views Total: 2839
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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=""></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">
<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>

3. Call the plugin with default options.

animation: {
animationMargins: false, // Animated margins
animationVisibility: false // Animated transitions when scrolling
rolledElements: 1 // Number of scrollable elements

Change log:


  • added fixes for click on mobile devixes



  • 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.