Skip to content

Using "grid" without specifying the height of "swiper" #7365

@vasilueff

Description

@vasilueff

Check that this is really a bug

  • I confirm

Reproduction link

Cant fork it

Bug description

There is a problem when using "grid" without specifying the height of "swiper". The height of each ".swiper-slide" is calculated as a percentage of the total height of the ".swiper-wrapper". And the script does not count the total height of the ".swiper-wrapper".
Because of this, all items are shown in one column.

1710217502440

  const swiperReasons = new Swiper('.swiper-reasons', {
    loop: false,
    grabcursor: true,
    spaceBetween: 0,
    breakpoints: {
        260: {
            slidesPerView: 1,
            loop: true,
            grid: {
                rows: 2,
                },

        },
        768: {
            slidesPerView: 2,
            grid: {
                rows: 4,
                },

        },
    },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-reasons-btn-next',
    prevEl: '.swiper-reasons-btn-prev',
  },
});

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11

Platform/Target and Browser Versions

All browsers

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