Swiper: Final 3 slides in loop do not fire `onClick` event initially

Created on 28 Jun 2017 · 7Comments · Source: nolimits4web/swiper

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)

Swiper Version: 3.4.2
Platform/Target and Browser Versions: 58.0.3029.110 (64-bit)

What you did

I initiated with the following settings, lazy loaded loop
I loaded the gallery
I clicked previous button
I clicked slide

initialSlide: 0,
slidesPerView: 6,
slidesPerGroup: 6,
breakpoints: {
  570: {slidesPerView: 1, slidesPerGroup: 1, lazyLoadingInPrevNextAmount: 1},
  1140: {slidesPerView: 2, slidesPerGroup: 2, lazyLoadingInPrevNextAmount: 2},
  1710: {slidesPerView: 3, slidesPerGroup: 3, lazyLoadingInPrevNextAmount: 3},
  2280: {slidesPerView: 4, slidesPerGroup: 4, lazyLoadingInPrevNextAmount: 4}
},
setWrapperSize: true,
pagination: '.swiper-pagination',
paginationClickable: true,
preloadImages: false,
lazyLoading: true,
lazyLoadingInPrevNext: true,
watchSlidesVisibility: true,
grabCursor: true,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onClick: function(swiper) {
  console.log('I expect this to fire');
}

Expected Behavior

I expected the onClick action to happen.

Actual Behavior

No click event fired...

It is ONLY for the initial slide click on the previous (end of loop) slides. If I have 60 slides in total, starting at 0, and click BACK before clicking anything, the final 3 (58, 59, 60) will not trigger click event. Clicking BACK again (55, 56, 57) and clicking the slide triggers the event.

Source

mrowles

👍3

Most helpful comment

As I understand, this thing happens because after the initialization of swiper with 'loop: true', it adds 2 additional slides: before the first user's slide(just a copy of the last user's slide) and after the last one(copy of the first user's slide). This thing adds a possibility to slide from the 1 slide to the last one using touch and visual consistency.

But the problem here is that this copy of slide is just a simple DOM copy, without event listeners, etc. So until you make at least a small swipe, Swiper doesn't change active-slide class to the user's slide, where all event listeners are added and work properly.

dev99problems on 5 Jul 2017

👍4

All 7 comments

exactly the same issue! I'm not using lazy loading, my config is below:

    scrollbar: null,
    direction: 'horizontal',
    slidesPerView: 1,
    scrollbarHide: true,
    keyboardControl: true,
    mousewheelControl: true,
    pagination: null,
    nextButton: '.my-swiper-button-next',
    prevButton: '.my-swiper-button-prev',
    loop: true,
    preventClicks: false,
    preventClicksPropagation: false,

no clicking event in loop, after first slide to last slide.

charlesc-ai on 2 Jul 2017

The same here (not using lazy loading as well — v.3.4.2).
I have several slides, loop mode is set to 'true'. After the initial rendering when I switch to the previous(last) slide and try to click on my slide to trigger some event — no click events are fired.

The same behavior when switching from the last slide to the first one — after that no click events are triggered on lmc. But after some touch event will be triggered, slide begins to work properly with all events which are added to it.

dev99problems on 2 Jul 2017

yeah, I have the same problem. Now I have to set loop to false