glide.js实现轮播图样式
程序员文章站
2024-03-25 13:04:04
...
首先请看效果图。
效果图:爱学集站
实现步骤:
1.首先引入js和css文件
<script type="text/javascript" src="/js/glide.min.js"></script>
<script type="text/javascript" src="/js/glide.modular.esm.js"></script>
<link rel="stylesheet" href="/css/glide.core.min.css"/>
2.在页面加载时写入如下代码:
var glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
autoplay: 3000,
gap: 5,
hoverpause: true
});
glide.mount();
可在大括号中根据需求配置。
3.页面样式,图片请自行添加。
<div style="float: left;width: 60%;height: 792px">
<div class="glide">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide"><img src="../img/slider/nAlbert.png"/></li>
<li class="glide__slide"><img src="../img/slider/ncell.png"/></li>
<li class="glide__slide"><img src="../img/slider/nfood.png"/></li>
<li class="glide__slide"><img src="../img/slider/nvalue.png"/></li>
<li class="glide__slide"><img src="../img/slider/nwater.png"/></li>
<li class="glide__slide"><img src="../img/slider/npandas.png"/></li>
<li class="glide__slide"><img src="../img/slider/nfoodinfo.png"/></li>
<li class="glide__slide"><img src="../img/slider/nskills.png"/></li>
<li class="glide__slide"><img src="../img/slider/ntutor.png"/></li>
<li class="glide__slide"><img src="../img/slider/noverweight.png"/></li>
<li class="glide__slide"><img src="../img/slider/nwater2.png"/></li>
<li class="glide__slide"><img src="../img/slider/nChopstickChallenges.png"/></li>
</ul>
</div>
</div>
</div>
以上即可实现页面的轮播图。
上一篇: vue原生轮播
下一篇: 【转】Java 数据流转换工具类 流