vue2 h5卡片式轮播图

可以使用vue-awesome-swiper插件实现卡片式轮播图。

首先安装插件：

npm install vue-awesome-swiper --save

然后在需要使用轮播图的组件中引入插件并注册：

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

export default {
  components: {
    VueAwesomeSwiper,
  },
};

在模板中使用插件：

<template>
  <div class="swiper-container">
    <vue-awesome-swiper :options="swiperOptions">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>
    </vue-awesome-swiper>
  </div>
</template>

其中，`swiper-container`为轮播图容器的样式，`swiper-wrapper`为轮播图内容的样式，`swiper-slide`为每个轮播项的样式。

可以通过swiperOptions配置选项来实现卡片式轮播图：

export default {
  data() {
    return {
      swiperOptions: {
        slidesPerView: 2, // 同时显示的数量
        spaceBetween: 10, // 项之间的间距
        centeredSlides: true, // 当前项居中显示
        loop: true, // 循环播放
        pagination: {
          el: '.swiper-pagination', // 分页器
          clickable: true, // 是否支持点击分页器切换
        },
      },
    };
  },
};

这样就可以实现一个简单的卡片式轮播图了。