现在险些每个网站的主页都离不开轮播图展示,比如淘宝京东首页的商品展示、企业官网的产品先容等等。一个效果非常好的轮播图会让人面前一亮,增加点进去的希望,相信每个前端小伙伴做过的项目里都有轮播图需求,有的可能会自己造轮子,但每次需求改变就会重新设计样式,这很让人头大。本日给大家先容的这个样式库险些内置了现在市情上所有的轮播样式,直接引用就能实现华美的效果。
单图
多图相应式可变宽度自适应高度中央模式延迟加载自动播放滑块同步
利用方法:
1.添加<div>标签
<div class=34;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});});
GitHub:https://github.com/kenwheeler/slick
往期推举:
一个免费的HTML5报表库
零代码搭建多种主题的个人博客
一款中国风前端组件库
中国传统颜色手册