vue 使用 swiper vue-awesome-swiper

文档与演示链接

文档地址
演示地址

NPM安装指令

npm install swiper vue-awesome-swiper@4.1.1 --save

代码部分

// 引入 Swiper 和 vue-awesome-swiper，以及Autoplay模块
import SwiperCore, {Autoplay} from 'swiper'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// 确保引入 swiper 的样式文件，检查路径是否正确
import 'swiper/swiper.scss'

// 使用 Autoplay 模块
SwiperCore.use([Autoplay]);

// 数据函数，返回 swiper 的配置选项
data() {
  return {
    swiperOption: {
      slidesPerView: 2,     // 一屏显示2个滑块
      spaceBetween: 30,    // 滑块之间的间距
      centeredSlides: true,  // 活动滑块居中显示
      autoplay: true,        // 开启自动播放
      pagination: {          // 配置分页器
        el: '.swiper-pagination',
        clickable: true
      }
    }
  }
},