现在险些每个网站的主页都离不开轮播图展示,比如淘宝京东首页的商品展示、企业官网的产品先容等等。
一个效果非常好的轮播图会让人面前一亮,增加点进去的希望,相信每个前端小伙伴做过的项目里都有轮播图需求,有的可能会自己造轮子,但每次需求改变就会重新设计样式,这很让人头大。
本日给大家先容的这个样式库险些内置了现在市情上所有的轮播样式,直接引用就能实现华美的效果。

单图

html5图片轮播插件GitHub精选  几乎实现了所有用果的轮播图插件 CSS

多图

相应式

可变宽度

自适应高度

中央模式

延迟加载

自动播放

滑块同步

利用方法:

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报表库

代码搭建多种主题的个人博客

一款中国风前端组件库

中国传统颜色手册