vue3 使用swiper的异形的slide

要在Vue3中使用Swiper的异形slide，需要先安装Swiper：

npm install swiper

然后，在Vue组件中引入Swiper：

import Swiper from 'swiper';
import 'swiper/css/swiper.css';

接着，在组件的mounted钩子函数中初始化Swiper：

mounted() {
  var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 30,
    grabCursor: true,
    breakpoints: {
      768: {
        slidesPerView: 2,
        spaceBetween: 10,
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 20,
      },
    },
    on: {
      init: function () {
        this.slides.each(function (index, el) {
          var $el = $(el);
          $el.css('background-image', $el.find('img').attr('src'));
          $el.find('img').hide();
        });
      },
    },
  });
},

注意，上面的代码中使用了jQuery的方法`css()`和`hide()`，需要先引入jQuery库。

最后，在组件的template中添加Swiper的HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/200/300" alt="Slide 1" />
      <div class="swiper-slide-content">
        <h2>Slide 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/200/300" alt="Slide 2" />
      <div class="swiper-slide-content">
        <h2>Slide 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/200/300" alt="Slide 3" />
      <div class="swiper-slide-content">
        <h2>Slide 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
  </div>
</div>

上述代码中，每个slide都包含一个img标签和一个swiper-slide-content元素，可以自由组合。

最终效果如下：