说明
- swiper版本众多,根据官方文档使用总是各种乱七八糟的报错,用起来最爽的还得是swiper3
- 接下来就是引入swiper3的使用操作方法
安装
npm i swiper@3.4.2
引入
- main.js中引入swiper (如果引入报错的话去node_modules文件夹里面查看一下具体文件路径)
// 直接把下面的代码引入就行
import Swiper from "swiper"
import 'swiper/dist/css/swiper.css'
使用
<template>
<div class="home">
<div class="swiper-container"
style="width: 50vw;height: 50vh;">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping"
style="background-color: pink; width: 50vw;height: 50vh;"></div>
<div class="swiper-slide swiper-no-swiping"
style="background-color: red; width: 50vw;height: 50vh;"></div>
<div class="swiper-slide swiper-no-swiping"
style="background-color: deeppink; width: 50vw;height: 50vh;"></div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
export default {
mounted () {
this.swiper = new Swiper('.swiper-container', {
loop: true, //不循环
spaceBetween: 20, // swiper-slide 间的距离为0
autoplay: 2000, // 不自动切换
speed: 1000, // 每次切换时长
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
// 更多的操作属性官网查看 官网地址: https://3.swiper.com.cn/api/index.html
});
}
}
</script>
<style>
</style>
效果图