移动端左右切换幻灯片开源组件

• 2019 年 12 月 5 日
• 筆記

mobile-swiper

经常会用到移动端左右切换幻灯片组件，今天提取了一个简易的方便后续使用。组件无任何依赖直接即可以使用。DEMO中使用了 touchstart 和 touchend` 事件，所以仅适用于移动端。

用法：

首先调用mobile-swiper.js

<script src="mobile-swiper.js"></script>

CSS代码：

html, body {          font-size: 20px;          margin: 0;          padding: 0;          background-color: #efefef;           overflow: hidden;  }  ul, li {          list-style: none;          margin: 0;          padding: 0;  }  ul {    position: relative;    width: 17.75rem;    height: 6.6rem;    margin: 1.3rem auto;  }  li {    position: absolute;    width: 5.4rem;    height: 6.6rem;    left: 50%;    margin-left: -2.7rem;  }  li img {    display: block;    width: 100%;    height: 100%;    border-radius: 0.15rem;  }

要求html ，#selector 是以下结构：

<ul id="selector">  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  <li>  <img src="http://www.zzfriend.com/images/gd.jpg">  </li>  </ul>