vue中使用vue-awesome-swiper实现图片轮播效果(超详细解析)

首先我们先了解一下vue-awesome-swiper

什么是vue-awesome-swiper?

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果.

安装:

npm install vue-awesome-swiper --save

先看一下我的项目结构吧:

项目创建命令:

vue init webpack whiteware

whiteware是项目名称

安装node.js在这里就不说了,再扯都扯零基础上了

我们这篇博客是为了用vue-awesome-swiper实现轮播效果,这是大佬封装好的一个轮播插件

安装好之后我们需要在项目中src > main.js中引入一下,我这里是全局引入,当然也可以局部引入,看个人需求

import App from './App'
import router from './router'
import axios from 'axios'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'


Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper, /* { default global options } */)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

一定不要忘了Vue.use(VueAwesomeSwiper, /* { default global options } */)

这样我们就可以去组件里用了

当然也可以把轮播单独写一个组件来用,在这里就不那么麻烦了

html:

<!-- 轮播图 -->
<div class="banner" >
	<div class="banner_bg"></div>
	<div class="banner_wrap">
		<!-- 加上v-if="banner_data.length > 1" 来防止swiper出现无法循环播放的效果 -->
		<swiper :options="swiperOption" v-if="bannerList.length>1"  class="banner-swiper-container swiper-container" style="border-radius: 0.15rem;">
			<swiper-slide class="swiper-wrapper" v-for="(item, index) in bannerList" :key="index">
				<a href="" style="border-radius: 0.15rem;">
					<img :src="item.image" :alt="item.title">
				</a>
			</swiper-slide>
		</swiper>
	</div>
</div>

js:

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default{
	components:{
	    swiper,
	    swiperSlide
	},
	name:'Index',
	data(){
		return {
			
			// 轮播图
			bannerList: [],        //图片列表
			swiperOption: {
				observeParents:true,
				pagination: '.swiper-pagination',
				paginationClickable: true,		//分页可点击
				slidesPerView: 1,		//每次滑动图片一张
		        slidesPerGroup: 1,		//每个div只有一张图片
				loop: true,				//false 不循环    true循环
				// grabCursor: true,	//鼠标光标
		       	autoplay: {
		        	delay: 2000,		//秒
		        	stopOnLastSlide: false,
		            disableOnInteraction: false,//滑动不会失效
		        },
			},
		}
	},
	
}

css;

/*轮播图*/
	.banner {
	    width: 100%;
	    height: 2.9rem;
	}
	.banner_bg {
	    width:100%;
	    height:1rem;
	    background: -webkit-linear-gradient(left, #fb5524 , #ff3052); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #fb5524, #ff3052); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right, #fb5524, #ff3052); /* Firefox 3.6 - 15 */
	    background: linear-gradient(to right, #fb5524 , #ff3052); /* 标准的语法 */
	    position:absolute;
	}
	.banner_wrap {
	    padding: 0 0.2rem;
	}
	
	.banner .swiper-container {
	    width: 100%;
	    height: 100%;
	}
	
	.banner .swiper-container .swiper-wrapper {
	    width: 100%;
	    height: 100%;
	}
	
	.banner .swiper-container .swiper-wrapper .swiper-slide {
	    height: 100%;
	}
	
	.banner .swiper-container .swiper-wrapper .swiper-slide img {
	    width: 100%;
	    height: 100%;
	    border-radius: 0.15rem;
	}
	
	.banner .swiper-container .banner-swiper-pagination {
	    bottom: 0;
	    height: 0.3rem;
	}
	
	.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	    width: 0.24rem;
	    height: 0.04rem;
	    opacity: 1;
	    background: #000;
	    border-radius: 0;
	}
	
	.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	    background: #ffffff;
	}
	
	.scroll-box {
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    /*height: 100vh;*/
	    overflow: hidden;
	}
	/* END */

以上就是全部代码了,很简单

最后附上一张效果图吧