Swiper.js and Vue transition group

Viewed 36

I would like to use the transition-group tag with the swiper-slide tag (from swiper.js).

Premise: This code

 <swiper
    :slidesPerView="'auto'"
    :space-between="20"
 >
    <swiper-slide
        v-for="item of list"
        :key="item.id"
    >
        <!-- slide content -->
    </swiper-slide>
 </swiper>

Will be rendered like this

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
</div>

But when I try to add a transition-group tag

<swiper
    :slidesPerView="'auto'"
    :space-between="20"
>
    <transition-group name="animation">
        <swiper-slide
            v-for="item of list"
            :key="item.id"
        >
            <!-- slide content -->
        </swiper-slide>
    </transition-group>
 </swiper>

This is the result:

<div class="swiper">
    <div class="swiper-wrapper">
    </div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
</div>

What can I do?

0 Answers
Related