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>
	

效果图
在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值