A small part is exposed on one or both sides of the swiper

The effect is as follows ：

  First introduce swiper library ：( Additional libraries attached , Choose... According to the actual situation )

    $cssList = array(implode(",", array(
        '//static2.51fanli.net/static/?f=webapp/css/base.css',
        'common/libs/vant/index.css',
        'common/libs/fmu/js/vendors/swiper/5.3.8/swiper.min.css',
        'huodong/activity88904/css/index.css'
        ))
    );
    $jsList = array(implode(",", array(
        '//static2.51fanli.net/static/?f=webapp/js/base.js',
        'common/js/fanli/trace/ubt.js',
        "common/libs/fmu/js/vendors/swiper/5.3.8/swiper.js",
        'webapp/js/common/hybridapi/nativefunction_v2.js',
		"common/libs/vmu/core/jquery.extend.js",
        'common/libs/vant/index.js',
        'common/libs/vmu/navtomini/1.0.0/nav-to-mini.vue.js',
        'huodong/activity88904/js/index.js'
        ))
    );

html:

<div id="J_swipe_container" class="banner swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide J_swipe_slide" v-for="(item, index) in bannerList" :key="index">
             <img :src="item.img" alt="" @click="handleBannerClick(item.link)">
          </div>
      </div>
      <div class="swiper-pagination"></div>
</div>

css:

.swiper-container {
   height: 3.34rem !important;
}
.swiper-slide{
   width: 6.7rem!important;
   margin: 0 0.2rem;
}
.swiper-slide-next{
   left: -0.2rem;
}

js:

setTimeout(function () {
     new Swiper('#J_swipe_container', {
         loop: true,
         slidesPerView: 'auto', //  By default, one screen displays several graphs , must auto！
         autoHeight: true,
         autoplay: {
           delay: 3000,
           disableOnInteraction: true,
         },
      })
}, 500)