Pass props on the first slide

[ParkDyel]

We are controlling the flags in the "@slide-change-end" event to animate transitions for internal items when switching to each slide.

Slides other than the first slide are normally controlled according to the flag. In the case of the first slide, two components are created internally and the animation is not normally applied.

And for debugging, I gave each component an id, but the first element does not have an id binding, and only the last element of the first slide is bound to id.

How do I resolve this?

example

    slider.banner-wrapper(ref="slider" direction="horizontal" :mousewheel-control="false" :performance-mode="true" :pagination-visible="true" :pagination-clickable="true" :loop="true" :speed="1000" :auto="true" :interval="5000" @slide-change-start="onSlideChangeStart"  @slide-change-end="onSlideChangeEnd")
      .banner.banner-1
        transition(name="fade-slide")
          .text-wrapper(v-show="textFlag.banner1" id="textFlag.banner1")
            h1 {{ TITLE }} 
            p {{ CONTENTS }} 
      .banner.banner-2
        transition(name="fade-slide")
          .text-wrapper(v-show="textFlag.banner2" id="textFlag.banner2")
            h1 {{ TITLE }} 
            p {{ CONTENTS }} 
      .banner.banner-3
        transition(name="fade-slide")
          .text-wrapper(v-show="textFlag.banner3" id="textFlag.banner3")
            h1 {{ TITLE }} 
            p {{ CONTENTS }}

...

onSlideChangeEnd(currentPage, el) {
      const beforePage = currentPage === 1 ? 3 : currentPage - 1;
      const $_target = `banner${currentPage}`;
      const $_bfTarget = `banner${beforePage}`;
      this.$set(this.textFlag, $_bfTarget, false);
      this.$set(this.textFlag, $_target, true);
}

.fade-slide-enter-active {
  transition: all 1s ease-in-out;
}

.fade-slide-leave-active {
  transition: all 1s ease-in-out;
}

.fade-slide-enter-to,
.fade-slide-leave {
  transform: translateY(0px);
  opacity: 1;
}

.fade-slide-enter,
.fade-slide-leave-to {
  transform: translateY(20px);
  opacity: 0;
}