vue 使用Swiper.js 实现轮播 ，中间图还在两边显示一小段上下图

首先得安装依赖 再引入Swiper.js 。
在main.js 引入
// swiper 轮播样式
import “swiper/swiper-bundle.min.css”;

分装组件页面

<template>
     <!-- 轮播组件 -->
    <div class="swiper_banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(val,index) in bannerDataList" :key="index">
                   <a :href="val.link">
                     <img class="item_img" :src="val.imgUrl" alt />
                    </a>
                 </div>
                <!-- <div class="swiper-slide"><img src="@/assets/sandai_banner.png" /></div>
                <div class="swiper-slide"><img src="@/assets/zhaungxiu.png" /></div>
                <div class="swiper-slide"><img src="@/assets/eankang.png" /></div> -->
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
//   import Swiper from "swiper";
// import {bannerData} from "../dictionary/supermarket";
import Swiper from "swiper/swiper-bundle.min.js"
    export default {
       props: {
          bannerData: { // 数据参数
            type: Array,
            default() {
              return []
            }
            }
        },
        data() {
            return {
                bannerDataList: this.bannerData, // 广告横幅图
            }
        },
        mounted () {
            this.$nextTick(()=>{
                new Swiper ('.swiper-container', {
                        direction: 'horizontal',
                        loop: true, // 是否无效循环
                        autoplay: { // 自动轮播效果
                            delay:3000,
                            disableOnInteraction: false,
                            },
                        slidesPerView: "auto",
                        centeredSlides:true,
                        spaceBetween: 15, // 图片的边距
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination'
                            }
                    })
            })
        },
        methods: {
            name() {
                
            }
        },
    }
</script>

<style lang="less">
    .swiper_banner{
        .swiper-container {
        //  margin-top: 0.2rem;
        width: 100%;
        height: 2.6rem;
        overflow: visible !important;
        position: relative;
        }

        .swiper-container .swiper-wrapper .swiper-slide {
        width: 6rem;
        border-radius: 0.12rem;
        //  margin-right: 0.3rem !important;
        }

        .swiper-container .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 2.6rem;
        border-radius: 0.12rem !important;
        }

        // .swiper-container .swiper-wrapper .swiper-slide-prev {
        // margin-top: 0.18rem;
        // height: 2.5rem !important;

        // }

        // .swiper-container .swiper-wrapper .swiper-slide-prev img {

        // height: 2.4rem !important;

        // }

        // .swiper-container .swiper-wrapper .swiper-slide-next {

        // margin-top: 0.18rem;

        // height: 2.5rem !important;

        // }

        // .swiper-container .swiper-wrapper .swiper-slide-next img {
        // height: 2.4rem !important;
        // }

        .swiper-container .swiper-wrapper .swiper-slide-active {
        width: 6rem;
        }
        .swiper-pagination {
        bottom: 0.1rem !important;
        }
        .swiper-pagination{
            bottom: -0.5rem !important;
        }
            // .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
            // .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}
    }

</style>