vue中使用swiper

1.下载

cnpm install swiper

2.引入swiper

js：在script标签中引入swiper模块

 import Swiper from "swiper"

css：在style标签中引入swiper的css

@import url("../../node_modules/swiper/css/swiper.css");

 

3.使用：

html部分：
<template>
	<div class="index myindex">

		<!-- 轮播图 -->
		<!-- Swiper -->
		<div class="swiper-container backgroundfff">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="../assets/banner1.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="../assets/banner2.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="../assets/banner3.jpg" />
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>

	</div>
</template>



js部分：
<script>
	// 引入swiper插件的js
	import Swiper from "swiper"
	export default {
		name: 'index',
		data() {
			return {

			}
		},
		created() {

		},
		mounted() {
			this.myswiper()
		},
		methods: {
			myswiper: function() {
				var swiper = new Swiper('.swiper-container', {
					pagination: {
						el: '.swiper-pagination',
					},
				});
			}
		}
	}
</script>

css部分：
<style>
	/* 引入swipercss */
	@import url("../../node_modules/swiper/css/swiper.css");

	.swiper-container {
		width: 100%;
		height: 9.375rem;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.swiper-slide img {
		width: 100%;
		height: 100%;
	}

</style>