vue 中 swiper 异形轮播图案例

在 Vue 中使用 Swiper 可以实现各种轮播图效果，包括异形轮播图。以下是一个简单的示例：

首先，安装 Swiper：

npm install swiper --save

然后，在需要使用轮播图的组件中引入 Swiper：

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

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

mounted () {
  const mySwiper = new Swiper('.swiper-container', {
    // Swiper 的配置项
  })
}

最后，在模板中添加轮播图元素：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in items" :key="index">
      <!-- 轮播图内容 -->
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

其中，`.swiper-container` 表示容器元素，`.swiper-wrapper` 表示轮播图的内容区域，`.swiper-slide` 表示单个轮播图元素，`.swiper-pagination` 表示轮播图的分页器。

如果要实现异形轮播图，可以在 Swiper 的配置项中设置 `slidesPerView` 和 `spaceBetween`，例如：

const mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 30,
  // 其他配置项
})

其中，`slidesPerView` 表示每个轮播图元素的宽度，`spaceBetween` 表示元素之间的间距。通过设置这两个参数，可以实现异形轮播图的效果。

完整的代码示例可以参考下面的代码片段：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in items" :key="index">
        <div class="item" :style="{ backgroundImage: `url(${item.imgUrl})` }"></div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  data () {
    return {
      items: [
        { imgUrl: 'https://picsum.photos/800/600?random=1' },
        { imgUrl: 'https://picsum.photos/800/600?random=2' },
        { imgUrl: 'https://picsum.photos/800/600?random=3' },
        { imgUrl: 'https://picsum.photos/800/600?random=4' },
        { imgUrl: 'https://picsum.photos/800/600?random=5' },
        { imgUrl: 'https://picsum.photos/800/600?random=6' },
        { imgUrl: 'https://picsum.photos/800/600?random=7' },
        { imgUrl: 'https://picsum.photos/800/600?random=8' }
      ]
    }
  },
  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })
  }
}
</script>

<style scoped>
.item {
  height: 300px;
  background-size: cover;
  background-position: center;
}
</style>