简介
在 web 开发中，图片展示是一个非常普遍的需求。此时一个图片画廊就显得非常重要。而 micro-gallery 是一个轻量级的 npm 包，为我们提供快速构建图片画廊的方案。
安装
安装 micro-gallery，只需要在命令行中输入以下命令即可：
npm install micro-gallery --save
使用方法
- 引入 micro-gallery
要开始使用 micro-gallery，首先要在你的项目中进行引入：
import microGallery from 'micro-gallery';
- 初始化画廊
处理好你要展示的图片数据以后，就可以开始初始化画廊。初始化时需要为画廊提供一个容器元素以及一个图片数组。使用下面的例子可以更好的说明：
-- -------------------- ---- ------- ----- --------- - ------------------------------ ------------------------------------- -- --------- ----- ------ - - ----- --------------------- ---- ---------- ----- --------------------- ---- ---------- ----- --------------------- ---- --------- -- ----- ------- - ----------------------- --------
- 自定义配置
micro-gallery 提供了一些选项，可以用来自定义画廊的行为。下面展示了设置相册的可选属性：
const config = {
max: 10, //微图库最大高度，默认为最大
min: 5, //微图库最小高度，默认为5
cardWidth: 10, //微图宽度，默认为10，可缩小。
};
// 创建带有设置属性的画廊
const myGallery = microGallery(container, images, config);事件
micro-gallery 提供了一些事件可以监听，以便进一步自定义行为：
gallery.show
当画廊被打开时触发。
gallery.on('show', function() {
console.log('展示画廊');
});gallery.hide
当画廊被关闭时触发。
gallery.on('hide', function() {
console.log('关闭画廊');
});gallery.change
当展示的图片切换时触发。
gallery.on('change', function() {
console.log('图片被更改');
});结论
micro-gallery 是一个快速构建图片画廊的轻量级 npm 包。它易于使用，可高度定制，具有广泛的事件系统。它是一个非常棒的工具，为 web 开发者提供了组织和管理图片的非常棒的方式。使用 micro-gallery 能够为你的网页提供更美观的图片展示，同时减少代码的编写时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d08041107