Swiper 图片轮播

Swiper 可视区域的规定

两个窗口，一个是可视窗口，一个是包含所有图片的窗口，类似荧屏与胶卷

父div (swiper_view)：{
    规定宽
    overflow：hidden
}
子div (图片容器)：{
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;	// 利用flex弹性盒子，防止图片过多自动换行，未规定宽度
    width: 同父div;
    justify-content: flex-start;	// 使首张图片位于swiper_view的容器内
    transition: margin 0.5s ease-in-out；	// 通过JS修改margin时实现动画效果
}
item: {
    width: 100%;
    max-width: 同父div
}

通过touchEvent判断操作修改图片容器margin实现图片的滑动

touchEvent: {	
    touchstart: start = e.touches[0].pageX;
    touchend: end = e.changedTouches[0].pageX;
    start - end > offset  // 左滑 否则 右滑 offset为你期望的滑动距离
};
边界: 0 < margin < n * imgWidth (n为图片的个数，imgWidth为图片的宽度)
正则匹配去除px后缀，修改margin后，赋值
修改margin: document.getElementById('子div').style.marginRight = `${margin}px`