Glide.js 是一个无依赖轻量级的响应式幻灯片插件-BFW插件库

Glide.js 是一个无依赖轻量级的响应式幻灯片插件

Glide.js 是一个无依赖轻量级的响应式幻灯片插件。

特点

无依赖。包括一切准备行动。

轻量级的。只有~23 kb(~7kb gzip)所有功能都准备好了。

模块化。删除未使用的模块并更多地删除脚本权重。

可扩展。插入您自己的模块，并提供额外的功能。

支持cdn及npm方式

npm安装

npm install @glidejs/glide

cdn引用

然后准备一些元素

<div class="glide">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide"></li>
<li class="glide__slide"></li>
<li class="glide__slide"></li>
</ul>
</div>
</div>

最后初始化并挂载一个幻灯片。

const glide = new Glide('.glide');
glide.mount();

浏览器兼容

IE 11+

Edge

Chrome 10+

Firefox 10+

Opera 15+

Safari 5.1+

Safari iOS 9+

示例代码

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/glide.core.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/glide.theme.min.css">
<style>
.glide {
  max-width: 960px;
  margin: 0 auto;
}

.glide__slides {
  list-style: none;
  padding: 0;
}
.glide__slides li {
  margin: 0;
}

.glide__slide img {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
}

.glide__arrows {
  width: 100%;
  bottom: 30px;
}

.glide__arrow {
  color: #dbdbdb;
  border: none;
  background: rgba(0, 0, 0, 0.4);
}
.glide__arrow.glide__arrow--left {
  left: 0;
  border-radius: 0 3px 0 3px;
}
.glide__arrow.glide__arrow--right {
  right: 0;
  border-radius: 3px 0 3px 0;
}
</style>



</head>

<body translate="no" >
  <div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
        <li class="glide__slide"><img src="//repo.bfw.wiki/bfwrepo/image/628436604b2ea.png"></li>
        <li class="glide__slide"><img src="//repo.bfw.wiki/bfwrepo/image/628435b1bf789.png"></li>
        <li class="glide__slide"><img src="//repo.bfw.wiki/bfwrepo/image/628433e9efefa.png"></li>
        <li class="glide__slide"><img src="//repo.bfw.wiki/bfwrepo/image/6284337bbaf11.png"></li>
    </ul>
  </div>
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/glide.min.js"></script>
      <script  >
new Glide('.glide').mount();

    </script>

  

</body>

</html>

Github 地址：https://github.com/glidejs/glide