Vue 使用Vue-awesome-swiper 4.0 实现图片轮播

首先安装：npm install vue-awesome-swiper --save

在main.js引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

新建Vue文件：

<template>
	<div>
		<div class="swiper-container">
			<swiper ref="mySwiper" :options="swiperOption">
				<swiper-slide v-for="itemImg in itemImgs" :key="itemImg.id">
					<img :src="itemImg.url" alt="swiper-image" class="header">
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
				<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
				<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
			</swiper>
		</div>
	</div>
</template>

在script中引入照片路径和swiper组件：

import {swiper,swiperSlide} from 'vue-awesome-swiper';
import zyl from '../images/zyl.jpg';
import zyl01 from '../images/zyl-1.jpg';

data()中定义：

itemImgs:[
				{url:zyl},
				{url:zyl01}
				],
				swiperOption:{
					notNextTick:true,
					autoplay: {
				    delay: 3000,
				    stopOnLastSlide: false,
				    disableOnInteraction: false,
				    },
					loop:true,
					
					direction:'horizontal',
					paginationType:'bullets',
					paginationClickable:true,
					pagination: {
						el: '.swiper-pagination',
						type: 'bullets',
						clickable :true,
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
						
					},
                    
					preventClicks : true,//默认true
					
				}

swiperOption中的参数定义看自己需要，与官网一致即可。官网地址：https://www.swiper.com.cn/api/navigation/356.html（4.0和3.0版本对于分页器、自动播放的写法有区别，网上大部分是3.0版本，看你自己版本）

定义组件+实例化：

components:{
		    swiper,
			swiperSlide
		},
computed:{
	        swiper(){
				return this.$refs.mySwiper.swiper;
			}
		},

效果：

如果对于Vue-awesome-swiper的图片切换的原点颜色不喜欢，可以修改他的CSS

【位置：node_modules/[email protected]@swiper/dist/css/swiper.css】

将background设置为你喜欢的颜色即可。