欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

以上即可实现页面的轮播图。

相关标签: 轮播