q-intersection in swiper slide not working

[zaynab-raisi]

I use swiper.js in a quasar project and I want to use q-intersection for images in swiper slides but it can't detect observing and internal elements not generated.

Expected:

This problem occur only in using q-intersection with swiper.js. In a simple case, for example a single image, it works fine. And another thing: If I hover on one slide, it's q-intersection content is generated.

Sample in codepen:
https://codepen.io/heyran/pen/LYxzebb
In codepen it not working even by hovering.

<div class="swiper-related-products full-width-swiper-container"> <div class="swiper-wrapper"> <router-link v-for="item in content" :key="item.id" :to="url(urlTypes.category, item)" class="swiper-slide rounded overflow-hidden" > <q-intersection once> <q-img :src="getPhotoByUrl(item.image)" :alt="item.name" :ratio="420 / 331" class="swiper-slide__img" > <template v-slot:loading> <q-skeleton type="rect" class="fit" /> </template> </q-img> </q-intersection> <div class="swiper-slide__content font-bold"> <div class="swiper-slide__title title-sm ellipsis"> {{ item.name }} </div> </div> </router-link> </div> <div class="swiper-button-next"> <q-icon name="chevron_left"></q-icon> </div> <div class="swiper-button-prev"> <q-icon name="chevron_right"></q-icon> </div> </div>

[metalsadman]

I suggest you reproduce it in a codepen https://codepen.io/rstoenescu/pen/VgQbdx.

[zaynab-raisi]

Done!
Link added to post.

[metalsadman]

Done!
Link added to post.

There's currently an issue with intersection in a codepen, but i dis test your code in a sandbox and see the images, tho the transition isnt working, maybe try it using their vue swiper component.

[zaynab-raisi]

As written in swiper documentation: "Swiper Vue.js components are compatible only with new Vue.js version 3".