Skip to content

Breakpoints based on Container width and not window width with ResizeObserver #4244

Closed
@katerlouis

Description

@katerlouis
Contributor

Is your feature request related to a problem? Please describe.
I have a swiper instance with 3 slides. When they all fit inside the container, I want to disable sliding and all controls and just use swiper as a layout. When they don't fit the parent any longer, I want "swiper to be an actual slider with certain swiper settings"

Describe the solution you'd like
containerBreakpoints: {} property that works just as breakpoints: {} does, but using ResizeObserver for width changes and not window.matchMedia() or window.resize()

Describe alternatives you've considered
I guess I could do something similar myself. But I'm too afraid to run into bugs. Swiper is pretty complex and I've run into a lot of issues over the years, when trying fancy stuff with updating settings and killing and re-initializing the instance etc.

Activity

changed the title [-]Breakpoints based on Contaner width and not window width (like element queries)[/-] [+]Breakpoints based on Contaner width and not window width with ResizeObserver[/+] on Feb 17, 2021
changed the title [-]Breakpoints based on Contaner width and not window width with ResizeObserver[/-] [+]Breakpoints based on Container width and not window width with ResizeObserver[/+] on Feb 17, 2021
ettoredn

ettoredn commented on Feb 23, 2021

@ettoredn
Contributor

Does this fix #4019 and #2218 ?

nolimits4web

nolimits4web commented on Feb 24, 2021

@nolimits4web
Owner

@ettoredn yes, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @ettoredn@nolimits4web@katerlouis

      Issue actions

        Breakpoints based on Container width and not window width with ResizeObserver · Issue #4244 · nolimits4web/swiper