glide.js实现轮播图样式

首先请看效果图。

效果图：爱学集站

实现步骤：

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&#