vu2手写实现轮播图loop模式+ slides分组

Vuex Carousel是一个轻量级的Vue.js组件，用于创建轮播图。如果你想手写实现一个带loop模式和slides分组功能的轮播图，可以按照以下步骤进行：

1. 定义状态：首先，在Vuex store中创建两个关键状态，如`currentSlideIndex`用于当前显示的幻灯片索引，`slideGroups`存储分组信息，每个分组包含一组幻灯片数组。

state: {
  currentSlideIndex: 0,
  slideGroups: {
    group1: [slide1, slide2, slide3],
    group2: [slide4, slide5],
    //...
  }
}

2. mutations：处理改变当前幻灯片和切换到下一组的操作。

mutations: {
  setSlideIndex(state, index) {
    state.currentSlideIndex = index;
  },
  changeSlideGroup(state) {
    state.currentSlideIndex = (state.currentSlideIndex + 1) % state.slideGroups.length;
  }
}

3. actions：触发上述变化时，通过actions更新状态。

actions: {
  nextSlide({ commit }) {
    if (this.isLastSlide()) {
      commit('changeSlideGroup');
    } else {
      commit('setSlideIndex', this.currentSlideIndex + 1);
    }
  },
  previousSlide({ commit }) {
    if (this.isFirstSlide()) {
      commit('changeSlideGroup');
    } else {
      commit('setSlideIndex', this.currentSlideIndex - 1);
    }
  }
}

4. components：在组件中监听轮播事件并调用对应的action。

<template>
  <div :key="slide.index">
    <img :src="slide.image" />
  </div>
</template>

<script>
export default {
  computed: {
    slide() {
      return this.$store.state.slideGroups[this.currentSlideIndex];
    }
  },
  methods: {
    handleSwipe() {
      this.$store.dispatch('nextSlide' /* 或者 'previousSlide' */);
    }
  }
};
</script>

在这个例子中，当用户滑动时，会检查是否到达了最后一张或第一张幻灯片，如果是则切换到下一组的第一个或最后一个幻灯片，形成了loop模式。同时，滑动只会影响当前分组内的幻灯片，实现了slides分组的功能。