Bug reportOct 21, 2026· 0:29· 9 views
Swiper 14: thumbs autoScrollOffset scrolls wrong direction when main swiper has loop:true
0:29 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumThumbs module autoScrollOffset handling when the main swiper uses loop:true (realIndex vs activeIndex mapping to the thumbs slideTo target). Also check the timing of the page's visible-range readout.
os: macOSdpr: 1config: main: loop:true; thumbs: autoScrollOffset:1, no loop; 6 slides, 3 thumbs visiblelocale: en-USbrowser: Chromium 151.0.7922.34library: Swiper v14.3.0 (swiper@14 bundle from cdn.jsdelivr.net)timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the test page. The main slider has loop:true and the thumbs have autoScrollOffset:1 with no loop. It shows Slide 1 with T1 highlighted and thumbs T1 to T3 visible.
- 2.Click the 'Next slide' button. Slide 2 shows and T2 is highlighted and in view.
- 3.Click 'Next slide' again. Slide 3 shows and T3 is highlighted and in view.
- 4.Click 'Next slide' again to reach Slide 4. Watch the thumbs strip.
- 5.Click 'Next slide' again to reach Slide 5.
- 6.Click 'Next slide' again to reach Slide 6.
- 7.Click 'Next slide' once more so the looping main slider wraps to Slide 1.
Expected
With autoScrollOffset:1, the thumbs strip should scroll so the active thumb stays in view. On Slide 4 it should show T4, and on Slide 5 it should show T5. The status readout should match the visible strip.
Actual
On Slide 4 at 13.0s and Slide 5 at 17.0s, the thumbs strip stays on T1 to T3 and no thumb is highlighted. The status says the active thumb is NOT IN VIEW and a red bug banner appears. The strip only jumps to T4 to T6 at Slide 6 (19.0s). After that the status readout does not match the visible strip at 19.0s, 21.0s and 23.0s.
Evidence
consoleWarning: the parser-blocking cross-site script swiper@14/swiper-bundle.min.js from cdn.jsdelivr.net is invoked via document.write. This is unrelated to the bug.
visualPage header reads 'Swiper v14.3.0 · main: loop:true · thumbs: autoScrollOffset:1, no loop'. Status shows Slide 1 of 6, thumbs T1 to T3 visible, active thumb T1 in view.
visualControl: Slide 2 of 6 (realIndex 1). T2 is highlighted and the status says it is in view.
visualControl: Slide 3 of 6 (realIndex 2). T3 is highlighted and the status says it is in view.
visualSlide 4 of 6 (realIndex 3). The strip still shows T1 to T3 with no highlight. The status says 'Active thumb: T4 ✗ NOT IN VIEW'. A red banner says active thumb T4 is out of view.
visualSlide 5 of 6 (realIndex 4). The strip still shows T1 to T3. The status says 'Active thumb: T5 ✗ NOT IN VIEW'.
visualSlide 6 of 6. The strip now shows T4, T5 and T6 with T6 highlighted. The status still says the visible thumbs are T1 to T3 and that T6 is NOT IN VIEW.
visualAfter wrapping to Slide 1 of 6 (realIndex 0), the strip shows T1 to T3 with T1 highlighted. The status says the visible thumbs are T4 to T6 and that T1 is NOT IN VIEW.
Issue markdown (copy-paste ready)
## Summary With Swiper v14.3.0, the thumbs strip uses `autoScrollOffset: 1` with no loop. The main swiper uses `loop: true`. In this setup the strip does not scroll to keep the active thumb in view when you advance past the third slide. ## Environment - Chromium 151.0.7922.34, macOS - Viewport 1280x720, DPR 1, en-US - Swiper v14.3.0 (swiper@14 bundle from cdn.jsdelivr.net) - Config: main `loop: true`; thumbs `autoScrollOffset: 1`, no loop; 6 slides, 3 thumbs visible ## Steps to reproduce 1. Open the test page. It shows Slide 1 with T1 highlighted and thumbs T1 to T3 visible (1.0s). 2. Click **Next slide**. Slide 2 shows with T2 in view (6.9s). 3. Click **Next slide**. Slide 3 shows with T3 in view (9.3s). 4. Click **Next slide** to reach Slide 4 (11.5s). 5. Click **Next slide** to reach Slide 5 (14.7s). 6. Click **Next slide** to reach Slide 6 (18.0s). 7. Click **Next slide** to wrap to Slide 1 (21.2s). ## Expected The thumbs strip scrolls so the active thumb is always visible. T4 should be in view on Slide 4 and T5 on Slide 5. The status readout should match the visible strip. ## Actual - 13.0s: Slide 4. The strip still shows T1 to T3 with no highlight. The status says `Active thumb: T4 ✗ NOT IN VIEW` and a red bug banner appears. - 17.0s: Slide 5. The strip still shows T1 to T3. The status says T5 is NOT IN VIEW. - 19.0s: Slide 6. The strip jumps to T4 to T6 with T6 highlighted. The status still says the visible thumbs are T1 to T3 and that T6 is not in view. - 23.0s: After wrapping to Slide 1, the strip shows T1 to T3 with T1 highlighted. The status says the visible thumbs are T4 to T6 and that T1 is not in view. ## Control (working) - 9.0s: Slide 2, T2 highlighted and in view. - 11.0s: Slide 3, T3 highlighted and in view. ## Evidence - Console at 0s: parser-blocking cross-site script warning for the swiper@14 bundle loaded via `document.write`. This looks unrelated. - No network errors were captured. ## Suspected area Thumbs module `autoScrollOffset` logic when the main swiper uses `loop: true`. The index used to pick the thumbs scroll target may be wrong, so the strip lags behind the active slide. The test page's visible-range readout also goes out of sync with the strip from 19.0s on. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →