方法一、
一、下载swiper
//使用命令行下载
npm install swiper
二、引入swiper
在需要的地方引入swiper以及swiper.min.css
<template>
<div class="swiper-container h-banner">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="banners in banner">
<img v-bind:src="banners.href" />
</div>
</div>
<div class="swiper-button swiper-button-prev"></div>
<div class="swiper-button swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from 'swiper';
import '../assets/css/swiper.min.css';
export default {
data() {
return {
banner:[
{title:"banner1",href: require("../assets/image/banner1.jpg")},
{title:"banner2",href:require("../assets/image/banner2.jpg")}
]
}
},
methods: {
},
created() {
var that = this;
that.$nextTick(function(){
var mySwiper = new Swiper(".swiper-container",{
autoplay: true,
effect: 'fade',
direction:"horizontal", /*横向滑动*/
loop:true, //形成环路(即:可以从最后一张图跳转到第一张图
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
})
}
}
</script>
方法二、
一、下载vue-awesome-swiper
npm install swiper vue-awesome-swiper --save-div
二、main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
三、在需要的地方引入
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide class="swiper-slide" v-for="banners in banner">
<img v-bind:src="banners.href" />
</swiper-slide>
<!--<div class="swiper-pagination" slot="pagination"></div>-->
<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import '../assets/css/swiper.min.css';
export default {
props:{
ishidden: ''
},
data() {
return {
banner:[
{title:"banner1",href: require("../assets/image/banner1.jpg")},
{title:"banner2",href:require("../assets/image/banner2.jpg")}
],
swiperOptions: {
notNextTick: true,
//循环
loop:true,
//设定初始化时slide的索引
initialSlide:0,
//自动播放
autoplay:true,
// 设置轮播
effect : 'fade',
//滑动速度
speed:800,
//滑动方向
direction : 'horizontal',
//小手掌抓取滑动
// grabCursor : true,
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
},
swiperSlides: [1, 2, 3, 4]
}
},
methods: {
},
created() {
},
components: {
Swiper,SwiperSlide
}
}
</script>
注:使用途中出现了一个警告(但不影响运行):
错误出现的地方:
import Swiper from 'swiper';
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'