vue2 使用 swiper 輪播圖效果

第一步、先安裝swiper插件

npm install swiper@3.4.1 --save-dev

第二步、組件內引入swiper插件

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

第三步、創建模板

<template>
    <div class="swiper-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in 16">
                    <el-image
                            style="width: 100%; height: 100%"
                            :src="url"
                            :preview-src-list="srcList"
                            fit="fill">
                    </el-image>
                </div>
            </div>
        </div>
        <!--  導航按鈕 -->
        <div class="swiper-button-prev btn swiper-button-black"></div>
        <div class="swiper-button-next btn swiper-button-black"></div>
    </div>
</template>

第四步、mounted里面創建swiper實例就大功告成

mounted () {
   this.swiper= new Swiper('.swiper-container', {
        //輪播圖swiper相關屬性
      })
  }

最后附上完整代碼：

<template>
    <div class="swiper-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in 16">
                    <el-image
                            style="width: 100%; height: 100%"
                            :src="url"
                            :preview-src-list="srcList"
                            fit="fill">
                    </el-image>
                </div>
            </div>
        </div>
        <!--  如果需要分頁器 -->
　　　　　<!-- <div class="swiper-pagination"></div>-->
        <!--  導航按鈕 -->
        <div class="swiper-button-prev btn swiper-button-black"></div>
        <div class="swiper-button-next btn swiper-button-black"></div>
    </div>
</template>
<script>
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'
    export default {
        //輪播圖
        name:'swiper',
        data () {
            return {
                swiper: null,
                url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }
        },
        mounted () {
            this.swiper= new Swiper('.swiper-container', {
                //速度
                speed:2500,
                //自動播放設置
                autoplay: {
                    delay: 500,
                    disableOnInteraction: false,
                    waitForTransition: false,
                },
                // //輪播類型
                // effect : 'coverflow',
                // centeredSlides: true,
                // //輪播類型的屬性設置
                // coverflowEffect: {
                //     rotate: 90,
                //     stretch: 10,
                //     depth: 90,
                //     modifier: 2,
                //     slideShadows: true
                // },
                //前進和后退的按鈕
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                centerInsufficientSlides: true,
                //循環播放
                // loop: true,                // slidesPerGroup: 3,
                //居中顯示
                loopFillGroupWithBlank: true,
                //展示張數
                slidesPerView: 'auto',
            })
        },
        methods:{}
    };
</script>
<style lang="scss">
    .swiper-container {
        width: 100%;
        height: 100%;
        padding: 15px 55px!important;
        .swiper-slide {
             width: 290px;
             height: 150px;
             padding-left: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .btn {
        height: 40px;
        width: 20px;
        background-size: contain;
    }
</style>