多个swiper在同一个页面使用

 <div class="swiper-container swiper-container1">
      <div class="swiper-wrapper">
        <div class='swiper-slide' >
         111
              </div>
            </div>
  </div>


///
 <div class="swiper-container swiper-container2">
      <div class="swiper-wrapper">
        <div class='swiper-slide' >
         111
              </div>
            </div>
  </div>

1.给每个swiper-container加不同的类区分

 mounted() {
    this.initSwiper1();
  },
  created() {},
  methods: {
    //初始化swiper
    initSwiper1() {
      this.$nextTick(() => {
        new Swiper(".swiper-container1", {
          //   loop: true, // 循环模式选项
          autoplay: 10000,
          // slidesPerView: 4,
          // spaceBetween: 18,
          // prevButton: ".swiper-button-prev",
          // nextButton: ".swiper-button-next",
          //    freeMode: true
        });
      });
    },

2.初始化时，使用不同的类

注意点：当不同的swiper采用组件形式，更改swiper相关样式时，写在style scope中 ，这样每个swiper的样式互不干扰；