vue2实现前端轮播图效果

Vue2 实现前端轮播图效果可以使用 Vue-Awesome-Swiper 插件，这是一个基于 Swiper.js 的 Vue 轮播组件。

1. 安装 Vue-Awesome-Swiper

npm install vue-awesome-swiper --save

2. 引入及注册组件

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

Vue.use(VueAwesomeSwiper);

3. 在 Vue 组件中使用

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list" :key="index">
        <img :src="item.img">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { img: '1.jpg' },
        { img: '2.jpg' },
        { img: '3.jpg' }
      ]
    };
  },
  mounted() {
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination'
      }
    });
  }
};
</script>

<style>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}
</style>

这样就能实现一个简单的轮播图效果了。