Horizontal/Vertical Carousel With Slide/Fade Animations - jqCarousel

File Size: 7.65 KB
Views Total: 26686
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Horizontal/Vertical Carousel With Slide/Fade Animations - jqCarousel

jqCarousel is a simple CSS-less jQuery carousel plugin that allows to rotate horizontally or vertically through a group of images (or any other html elements) with sliding or cross-fading effects.

View more:

How to use it:

1. Add the CSS class 'item' to the images and then wrap them into a DIV container as follow:

<div class="demo">
  <img class="item" src="1.jpg">
  <img class="item" src="2.jpg">
  <img class="item" src="3.jpg"> 

2. Add JQuery library and the jQuery jqCarousel plugin to the html page when needed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.carousel.js"></script>

3. Call the function on the parent DIV container to initialize the images as a default carousel.


4. Set the animation effect when transitioning to the next image.

  • slidex-left: right to left;
  • ​slidex-right: left to right;
  • ​slidey-up: bottom to top;
  • ​slidey-down: top to bottom;
  • ​opacx: cross-fade effect for horizontal carousle
  • ​opacy: cross-fade effect for vertical carousle
  type: 'slidex-right',

5. Config the autoplay behavior.

  auto: {

6. Customize the navigation arrows and pagination bullets.

  circle: {
  arrow: {

7. Set the height/width of the carousel.

  carsize: {

8. Execute a callback function on each transitioning.

  onchanging: function(){}

Change log:


  • Bugfix

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