Dislocation occurs in each slider when using vue-awesome-swiper 3D coverflow effect

3D Coverflow Effect is used in the project, but in the same page, it will be affected by other components (switch,popup) (with animation or transition effects during operation, such as the display and hiding of mask layers, the switch switch of switch), resulting in the dislocation of each slider and the failure to scroll properly.

`

<swiper :options="swiperOption">
   <swiper-slide>
   </swiper-slide>
 </swiper>
 
 <yd-switch
                v-model="swtich1">
            </yd-switch>
 
 
    swiperOption: {
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
                rotate: 0,
                stretch: -80, // slide
                depth: 400, // slide
                modifier: 0.5, //
                slideShadows: false // 
            },
            pagination: {
                el: ".swiper-pagination",
                type: "bullets"
            }
        }
 

`

Mar.04,2021

how should the width of a single element be set
every time I set it, it accounts for 100% of the width of the screen

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3c600-2c311.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3c600-2c311.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?