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 */      

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

最后附上一张效果图吧