Vue中使用swiper

Vue中使用swiper

一、swiper安装使用

1、安装，注意标明版本

npm install swiper@3 --save-dev

2、main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3、使用地方代码

<template>
	<div class="about">
		<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 class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

		<!-- 如果需要滚动条 -->
		<!--<div class="swiper-scrollbar"></div>-->
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper'
export default {
	name:'About',
	data(){
  		return {
  		}
	},
	mounted() {
  		new Swiper ('.swiper-container', {
    		loop: true,
    		// 如果需要分页器
    		pagination: '.swiper-pagination',
    		// 如果需要前进后退按钮
    		nextButton: '.swiper-button-next',
    		prevButton: '.swiper-button-prev',
   			// 如果需要滚动条
    		// scrollbar: '.swiper-scrollbar',
    		//如果需要自动切换海报
    		// autoplay: {
    			// delay: 1000,//时间 毫秒
    			//用户操作之后是否停止自动轮播默认true
    			// disableOnInteraction: false,
    	// },
 	 })
	}
 }
</script>

<style lang="less" scoped>
	.swiper-container{
		height: 500px;
		width: 100%;
	}
	.swiper-slide{
  		width: 100%;
  		height: 100%;
  		background-color: #42b983;
  		text-align: center;
  		line-height: 500px;
	}
</style>

4、完成效果

二、vue-awesome-swiper安装使用

1、安装

//需要指定版本
npm install vue-awesome-swiper@3 --save-dev

npm install swiper@3 --save-dev

2、局部使用

<template>
	<div class="recommendPage">
		<swiper :options="swiperOption" ref="mySwiper">
  			<swiper-slide>I'm Slide 1</swiper-slide>
  			<swiper-slide>I'm Slide 2</swiper-slide>
  			<swiper-slide>I'm Slide 3</swiper-slide>
  			<swiper-slide>I'm Slide 4</swiper-slide>
  			<div class="swiper-pagination" slot="pagination"></div>
  			<div class="swiper-button-prev" slot="button-prev"></div>
  			<div class="swiper-button-next" slot="button-next"></div>
		</swiper>
	</div>
</template>

<script>
	// 引入插件
	import { swiper, swiperSlide } from "vue-awesome-swiper";
	import "swiper/dist/css/swiper.css";

	export default {
		name: 'Home',
  		components: {
    		swiper,
    		swiperSlide
 		},
  		data() {
    		return {
      			swiperOption: {
       		 	loop: true,
        		autoplay: {
          			delay: 3000,
          			stopOnLastSlide: false,
          			disableOnInteraction: false
        		},
        		// 显示分页
        		pagination: {
          			el: ".swiper-pagination",
          			clickable: true //允许分页点击跳转
        		},
       			// 设置点击箭头
        		navigation: {
          			nextEl: ".swiper-button-next",
          			prevEl: ".swiper-button-prev"
       	 		}
      		}
    	};
  	},
  	computed: {
    	swiper() {
      		return this.$refs.mySwiper.swiper;
    	}
 	},
  	mounted() {
    	// current swiper instance
    	// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    	console.log("this is current swiper instance object", this.swiper);
    	// this.swiper.slideTo(3, 1000, false);
  	}
}
</script>

<style scoped>
  .recommendPage .swiper-container{
	    position: relative;
	    width: 100%;
	    height: 200px;
	    background: pink;
  }
  .recommendPage .swiper-container .swiper-slide{
	    width: 100%;
	    line-height: 200px;
	    background: yellowgreen;
	    color: #000;
	    font-size: 16px;
	    text-align: center;
  }

# 3、完成后效果