Swiper Thumbs navigation intermittently fails to respond to clicks

[berkinduz]

Check that this is really a bug

• I confirm

Description

We are experiencing intermittent click responsiveness issues with Swiper Thumbs navigation. Sometimes thumbnail clicks work correctly and navigate to the corresponding slide, but other times they are completely unresponsive. This creates an inconsistent and frustrating user experience.

Environment

• Swiper version: 8.3.2
• Framework: Angular 19.2.14
• Browser(s): Chrome, Firefox, Safari (all affected)
• Device: Desktop
• Platform: Web

Configuration

// Main Swiper Configuration
mainSwiperConfig: {
  direction: 'horizontal',
  navigation: false,
  pagination: false,
  loop: false,
  spaceBetween: 10,
  watchSlidesProgress: true,
  slidesPerView: 1,
  simulateTouch: false,
}

// Thumbnail Swiper Configuration  
thumbnailSwiperConfig: {
  direction: 'vertical',
  navigation: false,
  pagination: false,
  loop: false,
  spaceBetween: 10,
  watchSlidesProgress: true,
  slidesPerView: 6,
  simulateTouch: true,
}

// Connection
mainSwiper.thumbs.swiper = thumbnailSwiper;

HTML Structure

<!-- Main Swiper -->
<swiper [thumbs]="{ swiper: thumbsSwiper }" [config]="mainConfig">
  <ng-template swiperSlide *ngFor="let image of images">
    <img [src]="image.url" />
  </ng-template>
</swiper>

<!-- Thumbnail Swiper -->
<swiper (swiper)="thumbsSwiper = $event" [config]="thumbConfig">
  <ng-template swiperSlide *ngFor="let image of images">
    <img [src]="image.thumbnail" />
  </ng-template>
</swiper>

Configuration used on this live site:

• Main swiper: horizontal direction, single slide view
• Thumbnail swiper: vertical direction, 6+ slides visible
• Thumbs module connecting the two swipers

Expected Behavior

Every thumbnail click should consistently navigate the main swiper to the corresponding slide index.

Actual Behavior

Thumbnail clicks are intermittently unresponsive. Sometimes they work perfectly, other times they are completely ignored. The issue seems to be non-deterministic and affects user experience significantly.

Attempted Solutions

We have tried multiple workarounds mentioned in similar issues:

1. slideToClickedSlide: true - Partially helps but doesn't completely solve the issue
2. threshold: 1000 - No significant improvement
3. shortSwipes: false - No improvement
4. allowTouchMove: false - Reduces responsiveness further
5. centeredSlides: false - No improvement
6. Manual click handlers - Works but creates flickering and breaks Swiper's internal state

Frequency

• Occurrence: ~30-40% of thumbnail clicks are unresponsive
• Pattern: No specific pattern identified - seems random
• Impact: Critical UX issue affecting product image galleries

Additional Context

This issue appears to be related to the internal event handling mechanism of the Thumbs module. The problem persists across different browsers and devices, suggesting it's not environment-specific.

Possible Root Cause

The issue might be related to:

• Race conditions in Thumbs module event handling
• Conflict between simulateTouch settings on main vs thumbnail swipers
• Internal state synchronization issues between connected swipers

Request

This is a critical issue for e-commerce applications where reliable thumbnail navigation is essential. A fix or official workaround would be greatly appreciated.

Expected Behavior

Every thumbnail click should consistently navigate the main swiper to the corresponding slide index.

Actual Behavior

Thumbnail clicks are intermittently unresponsive. Sometimes they work perfectly, other times they are completely ignored. The issue seems to be non-deterministic and affects user experience significantly.

Swiper version

8.3.2

Platform/Target and Browser Versions

Chrome (macOS, windows)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR