Horizontal/Vertical Carousel With Slide/Fade Animations - jqCarousel

File Size: 7.65 KB
Views Total: 27680
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"> 
  ...
</div>

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.

$('.demo').jCarousel();

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
$('.demo').jCarousel({
  type: 'slidex-right',
});

5. Config the autoplay behavior.

$('.demo').jCarousel({
  auto: {
    isauto:true,
    interval:2000
  },
});

6. Customize the navigation arrows and pagination bullets.

$('.demo').jCarousel({
  circle: {
    isshow:true,
    cird:15
  },
  arrow: {
    isshow:true,
    arrowsize:24
  },
});

7. Set the height/width of the carousel.

$('.demo').jCarousel({
  carsize: {
    carwidth:750,
    carheight:450
  },
});

8. Execute a callback function on each transitioning.

$('.demo').jCarousel({
  onchanging: function(){}
});

Change log:

2017-01-09

  • Bugfix

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