引入swiper.css前：

插入swiper.css后：
其余循环出来的轮播图都在后面，且右侧next按钮不见

当改变窗口大小时：
轮播图会不见

代码：

<template>
    <div class="index">
        <div class="container">
            <!-- 大图轮播 -->
            <div class="swiper-box">
                <swiper v-bind:options="swiperOption">
                    <swiper-slide v-for="(item,index) in slideList" v-bind:key="index">
                        <a v-bind:href="'/#/product/'+item.id"><img v-bind:src="item.img"></a>
                    </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>
                </swiper>
            </div>
            <!-- 广告位 -->
            <div class="ads-box"></div>
            <div class="banner"></div>
            <!-- 商品列表 -->
            <div class="product-box"></div>
        </div>
        <service-bar></service-bar>
    </div>
</template>
<script src="dist/js/swiper-bundle.min.js"></script>
<script>
import ServiceBar from "../components/ServiceBar";
import {Swiper,SwiperSlide} from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'

export default {
    name: "index",
    components:{
        Swiper,
        SwiperSlide,
        ServiceBar
    },
    data(){
        return{
            swiperOption:{

            },
            slideList:[
                {
                    id:'42',
                    img:'/imgs/slider/slide-1.jpg'
                },
                {
                    id:'45',
                    img:'/imgs/slider/slide-2.jpg'
                },
                {
                    id:'45',
                    img:'/imgs/slider/slide-3.png'
                },
                {
                    id:'',
                    img:'/imgs/slider/slide-4.jpg'
                },
                {
                    id:'',
                    img:'/imgs/slider/slide-5.jpg'
                }
            ]
        }
    }
}
</script>

<style lang="scss">
    .index{
        .swiper-box{
            .swiper-container{
                height: 451px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>

请问老师这个是因为swiper.css的源文件问题导致的吗？还是什么情况，希望老师能告诉一个解决方案，谢谢！！