vue3实现简单的滑动切换

  <div class="bigv">
        <div class="flex" :style="{ 'transform': txStr }">
              //你的内容
      </div>
    </div>

setup

const transitionX = ref(0)
const txStr = computed(()=> `translateX(${-transitionX.value*317}px)`)
//317 是每个要展示的 盒子宽度
function toleft() {
  const r  = transitionX.value
  if (r == 0) return;
  transitionX.value = r-1
}
function toright() {
  const r  = transitionX.value
  if (r == 3) return;
  transitionX.value = r+1
}

切换按钮(图片素材自定义)

  <div class="change-btn center">
        <img src="@/assets/images/home/left.png" alt="" @click="toleft">
          <span style="color:#107A4A">0{{transitionX+1}}</span>
          <div style="width: 1px ;height: 12px;background-color: #909090;"></div>
          <span>04</span>
          <img src="@/assets/images/home/right.png" alt="" @click="toright"> 
        </div>

css

.change-btn{
    color: #909090;
    font-size: 11px;
    margin-top: 15px;
    img{
      width: 6.5px;
    }
    span{
      margin: 0 11px;
    };
  }
  .bigv{
    width: 317px; //固定最外部盒子宽度
    height: 179px;
    margin: 0 auto;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    >div{
      transition: all 0.8s;
    }
  }