用swiper.js写一个轮播

<div class="swiper-father">
            <div class="swiper-container" id="competitionEntries">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in SlideInfo" key="index" v-on:click="TabCode([item.code,item.unit,item.title])">
                        <div class="contentbox">
                            <div class="imgbox">

                            </div>
                            <div class="iteminfo">
                                <div><b class="data_value">{{item.value}}</b>{{item.unit}}</div>
                                <div>{{item.title}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <!--如果箭头需要放在里面（官网效果），add Arrows下的两句代码需要移到此处-->
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

 

.swiper-father {
    position: relative;
    padding: 0 37px;
    width: 96%;
    box-sizing: border-box;
    margin: 0px auto;
}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-slide {
    height: 110px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: rgba(6, 110, 202, 0.7);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAAxCAYAAAAWeCYPAAAYs0lEQ…v5MvsEssReKNtFqdr/7zVSZWaMAFIypPwMJf9w9/2/lv8HtrxxFVvnJ4QAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position-y: bottom;
    cursor: pointer;
}