css3轮播不用jpuery_jquery和CSS3响应式轮播图插件jcSlider

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

});

});