Why is the event v-on:click not working on all the elements of slick slider?

So hang events for the slider elements ( only the first scroll, if you make infinite, then on the second round does not click in elements.
<slider>
 <div v-on:click="handleOpenGalleryPopup(index)" v-for="(img, index) in residential.images" class="slider-item"><img src="img.small_image" :title="img.title"></div>
 </slider>

Here component with slider
<template>
 <div class="slider-wrapper">
<Slick
ref="slick"
:options="slickOptions"
>
<slot></slot>
</Slick>
</div>
</template>

the <script>
import Slick from 'vue-slick';

export default {
 computed: {
 slickOptions() {
 return {
 slidesToShow: 4,
 nextArrow: `<div class="arrow-wraper next"><img src="/img/common/arrow-right.svg"></div>`,
 prevArrow: `<div class="arrow-prev wraper"><img src="/img/common/arrow-left.svg"></div>`,
 swipeToSlide: true,
 responsive: [
{
 breakpoint: 992,
 settings: {
 slidesToShow: 3
},
},
{
 breakpoint: 600,
 settings: {
 slidesToShow: 2
},
}
]
}

},
},

},
 components: {
Slick
}
}
</script>
April 7th 20 at 11:56
0 answer

Find more questions by tags SlickVue.js