img-comparison-slider
用于比较图片(前后对比)的滑块组件。
使用示例:https://img-comparison-slider.sneas.io/examples.html
最重要的特性
安装
浏览器要求
- 支持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>
框架支持
支持的属性
除了默认的HTMLElement
属性(如class
、tabindex
、title
等),img-comparison-slider
还支持以下属性:
属性 | 描述 | 默认值 | 可用值 |
---|---|---|---|
value | 分隔线位置(百分比) | 50 | 0..100 |
hover | 鼠标悬停时自动滑动 | false | |
direction | 设置滑块方向 | horizontal | horizontal 、vertical |
nonce | 定义传递给内联样式的nonce | ||
keyboard | 启用/禁用键盘控制滑块位置 | enabled | enabled 、disabled |
handle | 启用/禁用仅通过手柄拖动 | false | true 、false |
事件
当用户改变滑块位置时,组件会触发slide
事件。
样式
一些样式技巧和想法可以在示例中找到。
组件元素(如默认手柄或分隔线)可以使用CSS3变量进行样式设置。
示例:
<style type="text/css">
img-comparison-slider {
--divider-width: 2px;
--divider-color: #c0c0c0;
--default-handle-opacity: 0.3;
}
</style>
可用变量
变量 | 描述 | 默认值 | 示例值 |
---|---|---|---|
--divider-width | 分隔两个图像的垂直线宽度 | 1px | 1em |
--divider-color | 分隔两个图像的垂直线颜色 | #fff | rgba(0, 0, 0, 0.5) |
--divider-shadow | 分隔两个图像的垂直线阴影 | none | 0px 0px 5px rgba(0, 0, 0, 0.5) |
--handle-position-start | 手柄在分隔线轴上的位置(如果需要偏离中心) | 50% | |
--default-handle-width | 默认手柄宽度 | 50px | |
--default-handle-color | 默认手柄颜色 | #fff | rgba(0, 0, 0, 0.5) |
--default-handle-opacity | 默认手柄不透明度 | 1 | 0.3 |
--default-handle-shadow | 默认手柄阴影 | none | 0px 0px 5px rgba(0, 0, 0, 1) |
手柄
可以通过给img-comparison-slider
内的任何元素分配slot="handle"
属性来更改组件的手柄。