主要思路：在外层div中套一个div，这个内层div宽度设置为外层的5倍，每张图片宽高撑满外层div拍成一行，然后内层div设置动画向左平移就有轮播图特效了，最后将最后一张轮播图设置为和第一张一样就可以显示成顺序无缝循环的样式了

以下为用css结合tailwindcss使用

<template>
<!--  我的轮播图组件，第一张和最后一张都是一样的-->
  <div class="w-full h-full overflow-x-hidden">
    <div class="image-container h-full">
      <img src="固城湖.webp" alt="" class="w-1/5 h-full object-cover float-left">
      <img src="高淳老街.jpg" alt="" class="w-1/5 h-full object-cover float-left ">
      <img src="高淳老街.jpg" alt="" class="w-1/5 h-full object-cover float-left ">
      <img src="高淳老街.jpg" alt="" class="w-1/5 h-full object-cover float-left">
      <img src="固城湖.webp" alt="" class="w-1/5 h-full object-cover float-left">
    </div>
  </div>
</template>

<script>
export default {
  name: "detailSwiper"
}
</script>

<style scoped>
.image-container{
  width: calc(100% * 5);
  animation: swiper 8s infinite;
}

@keyframes swiper {
  0%{transform: translateX(0)}
  10%{transform: translateX(0)}
  25%{transform: translateX(-20%)}
  35%{transform: translateX(-20%)}
  50%{transform: translateX(-40%)}
  60%{transform: translateX(-40%)}
  75%{transform: translateX(-60%)}
  85%{transform: translateX(-60%)}
  100%{transform: translateX(-80%)}
}

</style>

Q.E.D.