Vue中swiper二次封装以后传入prop属性覆盖的问题

写小demo的时候，对于swiper进行了二次简单封装成一个组件。
但是在使用过程中，如果一个页面多次使用封装的swiper组件后，prop传入的属性会覆盖，比如前一个swiper初始化默认可见4个，后一个swiper初始化默认可见2个，但是复用组件以后都是可见2个。
原因：
这是因为使用的同一个class：.swiper-container在new Swiper时被覆盖
修改：
每次new Swiper时传入不同的class标识即可

示例

如图：

前一个swiper

后一个swiper

页面

代码

swiper.vue

<template>
  <div class="my-swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min";
import "swiper/swiper.min.css";
export default {
   
  name: 'auto-swiper',
  props:{
   
    // 设定初始化时slide的索引
    initialSlide: {
   
      type: Number,
      default: 0
    },
    // Swiper的滑动方向
    derection: {
   
      type: String,
      de