可以通过bower或npm来安装该轮播图插件。
bower install --save jcslider
npm install jcslider
或直接下载压缩包文件。在页面中引入jQuery,jquery.jcslider.js和animate.min.css文件。
<
script
src
=
"js/jquery.min.js"
></
>
<!-- Slider Javascript file -->
"js/jquery.jcslider.js"
<!-- animate CSS stylesheet library -->
link
rel
"stylesheet"
href
"css/animate.min.css"
该轮播图的HTML结构使用一个无序列表,每个<li>元素是一个要动画的元素。
<li>
ul
class
"jc-slider"
li
"jc-animation"
[...]
</
在页面DOM元素加载完成之后,可以通过下面的方法来初始化该轮播图插件。
$(document).ready(
function
(){
$(
'.jc-slider'
).jcSlider();
});
或者在初始化时传入参数:
).jcSlider({
animationIn:
"bounceInRight"
,
animationOut:
"bounceOutLeft"
stopOnHover:
false
// 默认值为true
所有可用的效果是animate.css中的66种效果。
2018-09-01
2018-08-08
2018-08-02
2018-07-31
2018-07-11
2018-12-06
2014-10-22