at the beginning the swipper works fine, but when in the loop it re-enters the first element the button does not take the function (click). In this function open a modal
it has to be related to the swipper loop
<swiper #swiper [config]="configSlide ">
<div *ngFor="let i of proyects.proyectsItems; let index = index" class="swiper-slide ">
<div class="borderImage ">
<div class="shapeHexaImage ">
<div class="shapeHexaImage-2 ">
</div>
</div>
</div>
<img class="project-img " [src]="i.imagesProyects[0]">
<button (click)="openModalProyect( $event, i )" class="button-show-more"> Ver mas </button>
<p class="textImageProject ">
{{i.typeProyect}}
</p>
</div>
</swiper>
configSlide: SwiperOptions = {
navigation: {
nextEl: '.rightPosition',
prevEl: '.leftPosition'
},
autoplay: {
delay: 6000,
disableOnInteraction: false
},
// slideToClickedSlide: true, -- Dejar comentada. Esta propiedad tiene un bug cuando cambia el slide -- //
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 20
},
576: {
slidesPerView: 1.7,
spaceBetween: -60
},
770: {
slidesPerView: 2,
spaceBetween: -50
},
},
centeredSlides: true,
// initialSlide: 2, //
loop: true,
slideNextClass: 'swiper-slide-next',
slidePrevClass: 'swiper-slide-prev',
}