Vue2使用vue-awesome-swiper实现轮播图

首先安装依赖包

pnpm install swiper@5.0 vue-awesome-swiper -S

看官方文档：在Vue2中使用5版本或5版本以下的,在Vue3中使用大于6版本的

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

这里我使用的是5版本的,不同的版本，它的引入css包不一样

在main.js中使用

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
// import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在组件中使用

<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
    <!-- 指示点 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 左右箭头 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
<script>
export default {
  data(){
    return{
      swiperOption: {
          slidesPerView: 1,
          spaceBetween: 30,
          // 滑动速度
          speed:800,
          // 无限循环
          loop: true,
          // 挂载指示点
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
            clickable :true
          },
          // 左右箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
    }
  }
}
</script>
<style>
  .swiper{
    width: 100%;
    height: 400px;
    background: seashell;
  }
</style>

效果图

具体可看vue-awesome-swiper的文档去使用

地址：https://github.surmon.me/vue-awesome-swiper/