Skip to content

Make slidesPerView: 'auto' compatible with virtual slides mode. #7796

Open
@ahimik

Description

Clear and concise description of the problem

We are currently using slidesPerView: 'auto' with predefined slide widths, which works perfectly for our UI requirements. This approach allows our layout to adapt seamlessly to varying screen sizes by automatically adjusting the number of visible slides based on their widths and the spacing between them.

However, we have more than 50 slides in our implementation, and to optimize performance, we would like to leverage the virtual slide rendering mode to dynamically load slides. Unfortunately, we’ve found that slidesPerView: 'auto' is not currently compatible with the virtual mode, as virtual rendering requires an exact number for slidesPerView. This limitation conflicts with our design, where slide widths and spacing may vary depending on the screen size.

Suggested solution

Simply allow specifying a fixed slide width using a slideWidth: number parameter. The number of visible slides could then be calculated by dividing the Swiper width by the specified slideWidth plus the gap. This enhancement would enable the combination of the slidesPerView: 'auto' option with the virtual: true rendering mode.

Alternative

No response

Additional context

No response

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.

Would you like to open a PR for this feature?

  • I'm willing to open a PR

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions