vue开发一个实用美观的轮播图组件

网上有不少vue开发的轮播图资源，相信读者也看过不少，这里笔者开发了一个轮播图组件，简单美观实用。
先上示例图：

常见的轮播图都是占满屏幕的形式，像上图所示的轮播图虽然经常见到，但是在一些常见的轮播组件中并没有这种形式，所以笔者专门针对这种形式的轮播图开发了一个组件。
该组件暂时由两种形式：正常模式normal，缩放模式zoom，缩放模式即为上图所示模式。

思路：
1.构思常见轮播图的实现。
2.先表现出轮播图的样式，然后通过父容器overflow:hidden隐藏掉多余的部分。
3.设置定时器，每间隔一段几秒钟将轮播图所属的容器横向移动一个图的距离。
4.设置手势控制，根据手势在屏幕上滑动的方向，动态移动轮播图。
5.修改样式，实现zoom形式。
6.整理优化。

手势方向判断通过touchstart,touchend事件来判断，在触摸开始记录下触摸点，触摸结束后根据结束点和开始点判断移动方向，借此来操作轮播图的移动方向。

下面看一下主要的js逻辑部分：

<script>
export default {
  data() {
    return {
      ulStyle: { width: "750px", paddingLeft: "20px" }, // 轮播图容器宽度
      itemWidth: 750, // 单个轮播图容器的宽度，默认屏幕宽度,
      swiperStyle: {}, // 控