官网：
github：https://github.com/kenwheeler/slick
这个slick插件从前叫slick-carousel，历史很悠久，功能也很强大，官方号称“这是你需要的最后一个轮播插件”，自夸的这么厉害，我们就看看具体到底怎样的。
关于HTML、JS、CSS的基本骨架，官网首页都有举例，我不再重复，这里命一个题：要求2张图片、2个视频，一共4帧，做轮播，视频一个是<iframe>，另一个是<embed>。容器宽高：480x400。下面开始。
引入CSS：
<link href="http://cdn.bootcss.com/slick-carousel/1.6.0/slick.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet">
引入JS：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.bootcss.com/slick-carousel/1.6.0/slick.min.js"></script>
完整代码：
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/slick-carousel/1.6.0/slick.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet">
<style type="text/css">
.your-class, .your-class img {
width: 480px;
height: 400px;
margin: 0 auto;
}
.slick-arrow::before {
color: red;
}
</style>
</head>
<body style="margin: 0 auto; width: 600px; position: relative;">
<div class="your-class">
<div><\img src="http://www.yjz9.com/uploadfile/2014/1018/20141018063004280.jpg"></div>
<div><iframe src="http://www.tudou.com/programs/view/html5embed.action?type=2&code=Jui5jpphwVk&lcode=ZuEZWa4LY9Y&resourceId=845481068_06_05_99" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0" style="width:480px;height:400px;"></iframe></div>
<div><\img src="http://www.yjz9.com/uploadfile/2014/1018/20141018063006538.jpg"></div>
<div><embed src="http://www.tudou.com/a/ZuEZWa4LY9Y/&bid=05&iid=133086385&rpid=845481068&resourceId=845481068_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.bootcss.com/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
});
</script>
</body>
</html>
注意事项：
一、请先注意两侧的箭头。这两个箭头是插件动态生成的，不需要写任何代码。但是，你还是要控制它的样式，我在示例里给箭头加了红色，如果你不加颜色，在白背景下根本看不到箭头。除此之外还可以控制字体大小，比如加上font-size: 30px;。
二、.your-class元素的父元素必须加上position: relative，插件并不会帮你在外面套一个父元素然后设上position，所以你得自己来。
三、插件对flash视频的支持并不好，也可能并不能怪罪插件。尽量用于轮播图片吧。
四、官网的插件的设置非常丰富，想要调整什么都可以去官网查查。
网友评论