el-carousel 手动控制轮播

`el-carousel` 是 Element UI 提供的一款轻量级、易用的轮播组件，在 Vue.js 中可以用于创建响应式的图片轮播效果。手动控制轮播通常是指用户可以直接点击按钮或通过其他交互手段来切换幻灯片，而不是自动滚动。在 `el-carousel` 中，你可以通过 API 来实现这个功能：

1. 首先，你需要在 HTML 中添加轮播组件，并给它提供必要的属性，例如显示的项目数（`loop`）和是否有导航按钮（`controls`）：

<el-carousel :interval="3000" loop controls>
  <el-carousel-item v-for="(item, index) in items" :key="index">
    <img :src="item.src" alt="Slide {{ index + 1 }}">
  </el-carousel-item>
</el-carousel>

2. 然后，在 Vue 实例中，定义数据如 `items` 和控制切换的方法，比如 `nextItem()` 或 `prevItem()`：

export default {
  data() {
    return {
      items: [
        { src: 'slide1.jpg' },
        { src: 'slide2.jpg' },
        // 更多滑块...
      ],
      currentSlideIndex: 0,
    };
  },
  methods: {
    nextItem() {
      this.currentSlideIndex = (this.currentSlideIndex + 1) % this.items.length;
    },
    prevItem() {
      this.currentSlideIndex = (this.currentSlideIndex - 1 + this.items.length) % this.items.length;
    },
  },
};

3. 接着，可以在模板中绑定到按钮或其他事件上，以便在用户点击时触发相应的切换动作：

<template>
  <!-- ... -->
  <button @click="prevItem">上一张</button>
  <button @click="nextItem">下一张</button>
  <!-- ... -->
</template>