Vue简易三页轮播图实现

实现效果

点击切换。可移动一个单位
下面我们思考我们的组件使用形式

    <base-swiper class="swiper">
      <base-swiper-item v-for="item of list" :key="item" :gap="10">
        <div class="box">
          <div class="content">
            <img :src="item" alt="">
          </div>
        </div>
      </base-swiper-item>
    </base-swiper>

可以看到我们的swiper组件必须是成套使用的。在swiper-item里面设置一个slot

轮播图的实现存在的问题。
1、我们怎么才能确定处理swiper跟swiper-item的关系，也就是。我们怎么才能确定swiper跟swiper-item的关系。

2、怎么实现轮播图移动

3、怎么实现轮播图的无缝切换

4、轮播图移动不协调问题

解决方式

1、使用Vue的$paren$