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

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.