本期推荐一个前端轮播图的样式库——slick。
现在几乎每个网站的主页都离不开轮播图展示，比如淘宝京东首页的商品展示、企业官网的产品介绍等等。
一个效果非常好的轮播图会让人眼前一亮，增加点进去的欲望，相信每个前端小伙伴做过的项目里都有轮播图需求，有的可能会自己造轮子，但每次需求改变就会重新设计样式，这很让人头大。
今天给大家介绍的这个样式库几乎内置了现在市面上所有的轮播样式，直接引用就能实现华丽的效果。
使用方法
1.添加< div >标签
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
2.将 slick 文件夹导入到你的项目
3.引入 slick.css 文件
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
4.添加 slick.js 文件
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
5.初始化
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
项目展示
单图
多图
响应式
可变宽式
自适应高度
中心模式
延迟加载
自动播放
滑块同步
传送门
开源地址：https://github.com/kenwheeler/slick
-END-
原文始发于微信公众号（开源技术专栏）：Slick 几乎实现了所有效果的轮播图插件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/234992.html
