img-comparison-slider

用于比较图片（前后对比）的滑块组件。

使用示例：https://img-comparison-slider.sneas.io/examples.html

最重要的特性

• 移动设备友好
• 可访问性
• 响应式
• 体积小 - 压缩后不到12 kB（gzip压缩后不到4 kB）
• 兼容现代框架（React、Angular、Vue2、Vue3）
• 通过CDN或NPM分发

安装

浏览器要求

• 支持ECMAScript 2015 (ES6)。如有需要，请使用Babel。
• 支持自定义元素（V1）和ShadowDOM（V1）。如需支持旧版浏览器，请使用Polyfills。
• 支持CSS变量（自定义属性）。对于IE11，请使用Polyfill。

HTML

<script
  defer
  src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css"
/>

<img-comparison-slider>
  <img slot="first" src="https://raw.githubusercontent.com/sneas/img-comparison-slider/master/before.jpg" />
  <img slot="second" src="https://raw.githubusercontent.com/sneas/img-comparison-slider/master/after.jpg" />
</img-comparison-slider>

框架支持

• React
• Angular
• Vue2
• Vue3

支持的属性

除了默认的HTMLElement属性（如class、tabindex、title等），img-comparison-slider还支持以下属性：

事件

当用户改变滑块位置时，组件会触发slide事件。

样式

一些样式技巧和想法可以在示例中找到。

组件元素（如默认手柄或分隔线）可以使用CSS3变量进行样式设置。

示例：

<style type="text/css">
  img-comparison-slider {
    --divider-width: 2px;
    --divider-color: #c0c0c0;
    --default-handle-opacity: 0.3;
  }
</style>

可用变量

手柄

可以通过给img-comparison-slider内的任何元素分配slot="handle"属性来更改组件的手柄。