jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
安装
可以通过npm或bower来安装jcSlider插件。
bower install jcslider --save
npm install jcslider --save
使用方法
在页面中引入jquery和jquery.jcslider.min.js文件,以及animate.min.css文件。
HTML结构
jcslider轮播图的HTML结构如下:
初始化插件
在页面DOM元素加载完毕之后,通过jcSlider()方法来初始化该jquery轮播图插件。
$(document).ready(function(){
$('.jc-slider').jcSlider();
});
jcSlider轮播图插件的可用配置参数如下:
$(document).ready(function(){
$('.jc-slider').jcSlider({
animationIn : "bounceInRight",
animationOut : "bounceOutLeft",
stopOnHover : false, // true by default
loop : false // true by default
});
});