Как прервать показ слайдов в неактивном slider-item?

Question

[Максим]

Всем привет, подскажите, как остановить показ слайдов в StoriesItem.vue если его родительский swiper-item неактивен?

и если активен, то возобновить показ, то есть перезапустить активный слайд для показа

StoriesWrapper.vue

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay, EffectCube } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-cube';

const mainSwiperRef = ref(null);

const activeMainSlideIndex = ref(1);

const handleMainSwiperSlideChange = (swiper) => {
  activeMainSlideIndex.value = swiper.activeIndex + 1;
};

const handleSwiperEndSlide = (parentIndex, swiper) => {
  if (activeMainSlideIndex.value === parentIndex) {
    const mainSwiper = mainSwiperRef.value?.swiper;

    if (swiper.isEnd && !mainSwiper.isEnd) {
      mainSwiper.slideNext();
    } else if (swiper.isBeginning) {
      mainSwiper.slidePrev();
    }
    console.log(`Swiper ${parentIndex} ended slide change`, swiper);
  }
};

const handleMainSwiperInit = (swiper) => {
  mainSwiperRef.value = { swiper };
};
</script>

<template>
  <swiper
    ref="mainSwiperRef"
    :effect="'cube'"
    :cube-effect="{
      shadow: false,
      slideShadows: false,
      shadowOffset: 0,
      shadowScale: 0,
    }"
    :slides-per-view="1"
    :space-between="0"
    :loop="false"
    :modules="[Pagination, Autoplay, EffectCube]"
    class="!h-full main-swiper"
    @swiper="handleMainSwiperInit"
    @slide-change="handleMainSwiperSlideChange"
  >
    <swiper-slide
      v-for="mainIndex in 2"
      :key="mainIndex"
      v-slot="{ isActive }"
      class="relative !h-[60vh]"
    >
      <StoriesItem
        :parent-index="mainIndex"
        :on-swiper-end="
          (parentIndex, swiper) => handleSwiperEndSlide(parentIndex, swiper)
        "
        :is-active="isActive"
      />
    </swiper-slide>
  </swiper>
</template>

StoriesItem.vue

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay, Navigation } from 'swiper/modules';
import 'swiper/css';

const props = defineProps<{
  parentIndex: number;
  onSwiperEnd: Function;
  isActive: boolean;
}>();

const swiperRef = ref();

const isFirstItem = ref(false);

const handleSwiperSlideChange = (swiper) => {
  if (props.isActive && typeof props.onSwiperEnd === 'function') {
    if (swiper.isEnd) {
      swiper.autoplay.stop();
      setTimeout(() => {
        console.log('Время показа последнего слайда закончилось');
        props.onSwiperEnd(props.parentIndex, swiper);
      }, swiper.params.autoplay.delay);
    }

    if (swiper.isBeginning && swiper.activeIndex === 0 && !isFirstItem.value) {
      isFirstItem.value = true;
      swiper.autoplay.start();
    } else if (
      swiper.isBeginning &&
      swiper.activeIndex === 0 &&
      isFirstItem.value
    ) {
      isFirstItem.value = false;
      props.onSwiperEnd(props.parentIndex, swiper);
    }
  }
};

const handleMainSwiperInit = (swiper) => {
  swiperRef.value = { swiper };
};

watch(
  () => [props.isActive, swiperRef.value],
  (newIsActive) => {
    if (swiperRef.value?.swiper) {
      if (newIsActive) {
        swiperRef.value?.swiper.autoplay.stop();
        swiperRef.value?.swiper.slideTo(swiperRef.value?.swiper.activeIndex, 0);
        swiperRef.value?.swiper.autoplay.start();
      } else {
        swiperRef.value?.swiper.autoplay.stop();
      }
    }
  },
  {
    immediate: true
  }
);
</script>

<template>
  <div class="relative w-full h-full">
    <div
      class="absolute right-0 inset-y-0 w-1/2 cursor-pointer z-[3]"
      :class="`story__next_${props.parentIndex}`"
    ></div>
    <div
      class="absolute left-0 inset-y-0 w-1/2 cursor-pointer z-[3]"
      :class="`story__prev_${props.parentIndex}`"
    ></div>

    <div
      class="absolute top-4 flex w-full gap-6 px-6 z-[4]"
      :class="`story__pagination_${props.parentIndex}`"
    ></div>

    <swiper
      ref="swiperRef"
      :slides-per-view="1"
      :space-between="0"
      :watch-slides-progress="false"
      :modules="[Pagination, Autoplay, Navigation]"
      :autoplay="{
        delay: 3900,
        disableOnInteraction: false,
      }"
      :loop="false"
      class="sub-swiper !h-full"
      :navigation="{
        nextEl: `.story__next_${props.parentIndex}`,
        prevEl: `.story__prev_${props.parentIndex}`,
      }"
      :pagination="{
        el: `.story__pagination_${props.parentIndex}`,
        type: 'bullets',
        clickable: true,
        bulletClass: 'swiper-pagination-bullet',
        bulletActiveClass: 'swiper-pagination-bullet-active',
      }"
      @slide-change="handleSwiperSlideChange"
      @swiper="handleMainSwiperInit"
    >
      <swiper-slide
        v-for="subIndex in 4"
        :key="subIndex"
        class="bg-red-400 !h-full"
      >
        <h2>
          {{ "parentIndex_" + props.parentIndex + "_____Slide_" + subIndex }}
        </h2>
      </swiper-slide>
    </swiper>
  </div>
</template>