现在几乎每个网站的主页都离不开轮播图展示,比如淘宝京东首页的商品展示、企业官网的产品介绍等等。一个效果非常好的轮播图会让人眼前一亮,增加点进去的欲望,相信每个前端小伙伴做过的项目里都有轮播图需求,有的可能会自己造轮子,但每次需求改变就会重新设计样式,这很让人头大。今天给大家介绍的这个样式库几乎内置了现在市面上所有的轮播样式,直接引用就能实现华丽的效果。
![slick:几乎实现了所有效果的幻灯轮播图插件库插图 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063310215.png/webp95)
- 单图
![slick:几乎实现了所有效果的幻灯轮播图插件库插图1 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063314806.png/webp95)
- 多图
![slick:几乎实现了所有效果的幻灯轮播图插件库插图2 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063320193.png/webp95)
- 响应式
![slick:几乎实现了所有效果的幻灯轮播图插件库插图3 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063328840.png/webp95)
- 可变宽度
![slick:几乎实现了所有效果的幻灯轮播图插件库插图4 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063333355.png/webp95)
- 自适应高度
![slick:几乎实现了所有效果的幻灯轮播图插件库插图5 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063338408.png/webp95)
- 中心模式
![slick:几乎实现了所有效果的幻灯轮播图插件库插图6 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063343941.png/webp95)
- 延迟加载
![slick:几乎实现了所有效果的幻灯轮播图插件库插图7 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063348150.png/webp95)
- 自动播放
![slick:几乎实现了所有效果的幻灯轮播图插件库插图8 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063352870.png/webp95)
- 滑块同步
![slick:几乎实现了所有效果的幻灯轮播图插件库插图9 slick:几乎实现了所有效果的幻灯轮播图插件库](https://web.cdn.xxmd.com/wp-content/uploads/2021/08/20210827063357177.png/webp95)
使用方法:
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
});
});
演示地址+项目地址
本站所有文章,如无特殊说明或标注,均为本站原创发布;任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台;如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
如果下载链接失效的话,请劳烦您在评论区反馈,以便我们及时处理。