swiper vue3 异形

### 安装依赖

为了在 Vue3 中使用 Swiper 实现异形轮播图效果，安装合适的版本至关重要。对于 Vue3 的项目来说，推荐使用的 `vue-awesome-swiper` 版本为 3.1.3 和 `swiper` 版本为 4.5.1 或者更高版本如 5.3.6[^1]。

npm install swiper@5.3.6 --save
npm install vue-awesome-swiper@3 -S

### 配置 Swiper 组件

创建一个新的组件来封装 Swiper 轮播功能，并按照如下方式配置：

#### 导入必要的模块

import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  name: "CustomSwiper",
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    const swiperOption = ref({
      initialSlide: 1,
      pagination: true,
      centeredSlides: true,
      slidesPerView: 1.8,
      effect: 'coverflow',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false
      }
    });

    function onSwiperChange(swiper) {
      console.log('Current Index:', swiper.realIndex);
    }

    return {
      swiperOption,
      onSwiperChange
    };
  }
};

这段代码展示了如何通过设置不同的属性来自定义 Swiper 行为，比如初始化时显示哪张幻灯片、是否启用分页器以及幻灯片之间的过渡效果等[^3]。

### HTML 结构

接着，在模板部分构建 Swiper 的结构：

<template>
  <div class="swiper-container">
    <swiper :options="swiperOption" @slide-change="onSwiperChange">
      <!-- 幻灯片内容 -->
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      
      <!-- 分页器 -->
      <div slot="pagination" class="swiper-pagination"></div>
    </swiper>
  </div>
</template>

<style scoped>
.swiper-container {
  width: 100%;
  height: 300px;
}
</style>

这里设置了容器的高度和宽度以适应页面布局需求；同时利用插槽机制添加了分页导航元素。