vue项目中使用swiper轮播

安装swiper

npm install swiper@4 --save -dev
npm install vue-awesome-swiper@3 --save-dev

使用swiper

<template>
  <div class="swiper-container">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <img :src="slide" :alt="'Slide ' + (index + 1)" />
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>
  </div>
</template>
 
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
 
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        // Swiper 配置项
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
      },
      slides: [
        'https://example.com/slide1.jpg',
        'https://example.com/slide2.jpg',
        'https://example.com/slide3.jpg',
      ],
    }
  },
}
</script>
 
<style>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
</style>