在vue-cli项目中使用使用swiper

最新推荐文章于 2023-02-21 14:42:22 发布

吴莉

最新推荐文章于 2023-02-21 14:42:22 发布

阅读量2k

点赞数 4

分类专栏： vue 文章标签： vue-cli swiper

本文链接：https://blog.csdn.net/kgcwuli/article/details/94397995

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第一步：切换进项目安装swiper

npm install swiper --save-dev

第二步：创建组件 swiper.vue
导入

import Swiper from "swiper";
@import 'swiper/dist/css/swiper.css';

完整swiper.vue组件

<template>
	<div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">Slide 1</div>
				<div class="swiper-slide">Slide 2</div>
				<div class="swiper-slide">Slide 3</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from "swiper";
	export default{
		name:"swiper",
		mounted(){
			var mySwiper = new Swiper ('.swiper-container', {

			})        
		}
	}
</script>
<style>
	@import 'swiper/dist/css/swiper.css';
	.swiper-container {
		width: 600px;
		height: 300px;
	}  
</style>