Skip to content

Multiple issues with advanced use case #8126

@matheusgrieger

Description

@matheusgrieger

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/qmksrr

Bug description

There are multiple issues when combining Thumbs/Controller, EffectFade, and Virtual modules, with other settings for advanced use case. Please let me know if I did anything wrong in my setup. I tried following the docs as closely as possible, but I made sure to take all caveats documented there into account.

1- loop causes thumbs to slide with weird/random behavior.
2- Thumbs slideToClickedSlide is not working, requiring additional event handlers to force-enable it. Sliding the thumbnails without these events does not change the active main slide.
3- autoHeight does not work at all with this setup.
4- Links are not clickable in the main slider with FadeEffect enabled (also mentioned in #6908 which is closed).
5- Controller makes the controlled Swiper start on wrong index.

Expected Behavior

1- Thumbs/Controller Swiper should slide in the appropriate direction, and always execute the slide transition when clicking on other slides. Controller Swiper should correctly respond to dragging, without creating empty gaps at the end/start of the slides.
2- Clicking on thumbnails should activate the clicked slide and slide to it (because centeredSlides is enabled).
3- Swiper should recalculate the active slide height when rendering it.
4- Links should be clickable.
5- Starting index should be the same as active index from controller Swiper.

Actual Behavior

1- Sometimes it slides normally, other times it slides in the opposite direction, other times it just doesn't slide at all. When using Controller and click-and-dragging, Swiper shows empty spaces at the end/start of the controller Swiper, indicating the loop calculation is not working correctly.
2- Clicking on thumbnails update the main Swiper but doesn't even activate the clicked Thumb, highlighting the wrong Thumb. Additional event handlers are required for this to work.
3- The first slide has wrong height, and all other slides have 0 height. When using Controller, no slides work correctly.
4- Swiper is setting pointer-events: none for all slides on the main Swiper.
5- Controlled Swiper is starting on index 3 while the active slide on the controller Swiper is 0.

Swiper version

12.0.3

Platform/Target and Browser Versions

macOS Chrome 142.0.7444.176

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions