vue 使用 swiper

说明

1. swiper版本众多,根据官方文档使用总是各种乱七八糟的报错,用起来最爽的还得是swiper3
2. 接下来就是引入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>
	

效果图