Vue项目中实现图片手动翻页效果，纯css写法 无引用插件

在Vue项目中实现图片手动翻页效果，仅使用CSS，可以利用CSS的`transform`、`transition`以及一些计算属性来模拟滑动效果。这里是一种基本的思路：

1. **创建基础结构**:
- 使用HTML创建一个包含多个图片容器（`.carousel-item`），并添加必要的索引类如`.carousel-item-0`, `.carousel-item-1`, 等等，代表当前显示的图片位置。

<div class="carousel">
  <div class="carousel-item carousel-item-0" v-for="(image, index) in images" :key="index">
    <img :src="image.src" :alt="image.alt">
  </div>
</div>

2. **样式设置**:
- 首先定义一个滚动区域和每个图片容器的基本样式，包括宽度、高度、position和transform初始值。
- 设置`transition`用于平滑切换动画。

.carousel {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px; /* 图片高度 */
  transition: transform 0.5s ease-in-out;
}

3. **JavaScript绑定事件**:
- 在Vue组件中，维护一个状态变量`currentPage`表示当前显示的图片索引，初始化为0。

export default {
  data() {
    return {
      currentPage: 0,
      images: [
        // 图片数组...
      ]
    }
  },
  methods: {
    nextPage() {
      this.currentPage = (this.currentPage + 1) % this.images.length;
    },
    previousPage() {
      this.currentPage = (this.currentPage - 1 + this.images.length) % this.images.length;
    }
  },
}

4. **添加滚动交互**:
- 当点击下一张或上一张按钮时，更新`currentPage`，然后应用相应的transform，例如向右移动当前页面到下一个位置：

methods: {
  ...,
  prevOrNextSlide(direction) {
    if (direction === 'next') {
      this.nextPage();
    } else if (direction === 'prev') {
      this.previousPage();
    }

    const items = document.querySelectorAll('.carousel-item');
    const item = items[this.currentPage];
    item.style.transform = `translateX(${-(item.clientWidth * direction)})`;
  }
},
// 然后在模板中绑定这些方法给按钮