在前端开发中，响应式的图片展示很常见，但是开发这样的组件需要耗费不少时间和精力。而在 npm 生态系统中，有许多良好的组件包可供我们使用，kelnik.gallery 包就是其中一个很好的选择。
kelnik.gallery 是一个基于原生 JavaScript 的图片画廊组件，它的特点在于十分灵活，可以适应不同的需求，同时还提供了多种主题样式，可以快速和便捷地实现图片展示的需求，适用于 Web 和移动端开发。
安装 kelnik.gallery
使用 npm 进行安装：
npm install kelnik.gallery
或者使用 CDN 引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kelnik.gallery@1.0.0/dist/kelnik.gallery.min.css"> <script src="https://cdn.jsdelivr.net/npm/kelnik.gallery@1.0.0/dist/kelnik.gallery.min.js"></script>
快速上手
在 HTML 页面中引入 kelnik.gallery 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="/path/to/kelnik.gallery.min.css"> <script src="/path/to/kelnik.gallery.min.js"></script>
在 JavaScript 中初始化 kelnik.gallery：
let gallery = new KelnikGallery('#gallery');
gallery.show(['image-1', 'image-2', 'image-3']);其中，#gallery 是图片展示区域的元素选择器，['image-1', 'image-2', 'image-3'] 是要展示的图片的 ID 列表。具体来说，要展示的图片可以放在以下元素中：img, figure, picture 等。需要注意的是，这些元素必须包含 data-kelnik-gallery-image 属性，属性值为该图片的 ID，如下所示：
<img src="image-1.png" data-kelnik-gallery-image="image-1">
图片 ID 不可重复。
深入使用
以下是 kelnik.gallery 的进一步使用方法。
自定义主题
kelnik.gallery 有多个主题可供选择，开发者也可以根据自己的需求自定义主题。
使用现成主题
在初始化 kelnik.gallery 对象时，可以传递一个字符串参数表示主题名称，如下所示：
let gallery = new KelnikGallery('#gallery', 'dark');目前支持的主题名称有：default, dark, minimal, rounded。如果不传递参数，则使用默认主题。
自定义主题
开发者也可以自定义主题，只需在 CSS 中覆盖 kelnik.gallery 的默认样式即可。
-- -------------------- ---- ------- --------------- - -- ----- -- - ---------------------- - -- ----- -- - --------------------------- - -- ----- -- -
添加缩略图
kelnik.gallery
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665481e8991b448e277e