vue-awesome-swiper的安装和使用

一、安装

npm install swiper vue-awesome-swiper --save

可以在vue-awesome-swiper后面添加版本，这样就不会默认安装最新版本，如

npm install swiper vue-awesome-swiper@3.6.7 --save

在下面的例子中，笔者使用的v3.6.7

二、全局挂载（肯定是写在main.js里面）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

三、实例

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" class="swiper-container" >
            <!-- slides -->
            <swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
                <img class='swiper-img' :src='item.imgUrl' alt="去哪儿门票" />
            </swiper-slide>
            <!-- Optional controls ,显示小点-->
            <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>
            <div class="swiper-scrollbar"   slot="scrollbar"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "HomeHeader",
        data(){
            return{
                swiperOption:{
                    // 参数选项,显示小点
                    pagination:'.swiper-pagination',
                    //循环
                    loop:true,
                    //每张播放时长3秒，自动播放
                    autoplay:2000,
                    //滑动速度
                    speed:2000,
                    // delay:1000
                    effect: 'coverflow',
                    fadeEffect: {
                        crossFade: false,
                    },
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                    coverflowEffect: {
                        rotate: 0,
                        stretch: 120,
                        depth: 100,
                        modifier: 1,
                        slideShadows : true,
                    }, //这样应该就是你想要的效果
                    zoom:'zoom',
                    nextButton:'.swiper-button-next',
                    prevButton:'.swiper-button-prev',
                    scrollbar:'.swiper-scrollbar'


                },
                //三张轮播，使用变量循环
                swiperList:[
                    {
                        id:'001',
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
                    },
                    {
                        id:'002',
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
                    },
                    {
                        id:'003',
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
                    }
                ]
            }
        },
    }
</script>

<style scoped lang="stylus">
    // >>>穿透作用，因为swiper-pagination-bullet-active类在组件内部定义的，想要wrapper也能作用到，可以用>>>
    .wrapper >>>.swiper-pagination-bullet-active
      background #fff !important
    .wrapper
      overflow:hidden
      width 100%
      height:0
      padding-bottom:26.6666667%
      background :#ccc
      .swiper-item
        width:100%
        .swiper-img
          width:100%
</style>