vue3 Carousel carousel map element Plus custom picture page flip

The usage of element plus is not mentioned here, and the following goes directly to the custom usage of the revolving lantern

<img src="../../../../assets/images/left_01.png" alt="" class="left_img shou" @click="arrowClick('left')">
   <div class="swiperitem">
     <el-carousel height="82px" indicator-position="none" arrow="never" @prev="prev" :autoplay="false" ref="cardShow"  @setActiveItem="setActiveItem">
       <el-carousel-item v-for="item in arr" :key="item">
         <!-- <h3 class="small justify-center" text="2xl" style="background-color: pink;height: 80px;">{
    
    { item }}</h3> -->
         <div class="row_between" style="width: 100%;">
           <div class="itembox col_center shou" v-for="(items,index) in 4">
             <text class="swtitle">{
   
   { item }}彩色多普勒彩色多普勒彩色多普勒彩色多普勒</text>
             <div class="swdate">2022-03-12 12:30:06</div>
           </div>  
         </div>
       </el-carousel-item>
     </el-carousel>

   </div>
 <img src="../../../../assets/images/left_01.png" alt="" class="right_img shou" @click="arrowClick('right')">

<script setup>
import {
    
     ref } from 'vue'
let arr = ref([1,2,3,4])
let cardShow = ref(null)
console.log('reff', cardShow)
let arrowClick = (val) => {
    
    
      if(val === 'right') {
    
    
        cardShow._value.next()
      } else {
    
    
        cardShow._value.prev()
      }
    }

</script>

Idea:
Get the method on dom through ref. and then call the method

The pit encountered:
the dom is obtained through ref. But the method cannot be used, and an error similar to this is reported: Uncaught TypeError: cardShow.prev is not a function.
Then, after checking the information on the dom, it is found that there is a dom method on _value. So the usage of cardShow._value.next() appeared. Friends, remember to pay attention! !