vue2 使用 swiper 轮播图效果

vue2 使用 swiper 轮播图效果

Posted on 2021-04-08 13:58  书中枫叶  阅读(1612)  评论(0)  编辑  收藏  举报

上次更新: 2022-03-08 17:06

第一步、先安装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>

 

本文来自博客园，作者：书中枫叶，转载请注明原文链接：https://www.cnblogs.com/zy-mg/p/14631882.html