img-comparison-slider

img-comparison-slider npm官网

前言

• 最近公司的官网需要改版，设计找到了一个比较有意思的交互效果，主要是用于比较图像前后的滑块组件，更直观的感受，简单记录一下!嘿嘿~~~

基本使用

• 简单引入cdn

     <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 class="w-100" slot="first" src="//qn1.10soo.net/assets24/202403251633139.png" />
      <img class="w-100" slot="second" src="//qn1.10soo.net/assets24/202403251634549.png" />
      <img class="w-100" slot="handle" src="//qn1.10soo.net/assets24/202403251634174.svg" style="width: 48px !important" />
 </img-comparison-slider>

**其中slot="handle"我理解的就是插槽吧，可以修改滑动按钮的图标样式，可以插入图片，也可以自定义样式

实现结果