-
安装 swiper
swiper版本众多,单用其中一个版本就够了,不同的版本有不同的使用方式,尽量安装低版本的最好,版本太高可能会不兼容,这里推荐swiper5
npm install swiper@5.4.5
-
安装 vue-awesome-swiper
vue-awesome-swiper与swiper配套使用
npm i vue-awesome-swiper@4.1.1
-
main.js 中引入
// 如果这里报错,找不到文件,就去node_modules文件夹中查看具体位置在进行引入 import VueAwesomeSwiper from 'vue-awesome-swiper/dist/vue-awesome-swiper' // css同理 import 'swiper/css/swiper.min.css' Vue.use(VueAwesomeSwiper)
-
页面中使用
<template> <div class="banner"> <swiper ref="mySwiper" style="height:100%;" :options="swiperOptions"> <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> </div> </template> <script> data(){ return { // 具体他的配置在官网中查看,根据需求配置 // https://www.swiper.com.cn/api/navigation/209.html swiperOptions: { slidesPerView: 1, autoplay: { delay: 1000, stopOnLastSlide: false, disableOnInteraction: true, } } } } </script> <style> .banner { width:200px; height:100px; } </style>
Vue中使用Swiper
最新推荐文章于 2023-03-02 09:41:06 发布