Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Looping Carousel is out of order when inside of Sl-Resize-Observer #1991

Open
colin-domaine opened this issue Apr 22, 2024 · 1 comment
Open
Labels
bug Things that aren't working right in the library. help wanted Ready for a contributor to tackle.

Comments

@colin-domaine
Copy link

Describe the bug

I'm using sl-resize-observer to watch for changes to a carousel. When the loop property is applied to the carousel, the carousel show the last slide item first and then displayed the slides in the correct order.

The carousel render in the correct order when:

  1. the carousel is not inside the resize observer,
  2. the loop property is not applied

For context, I am using the resize observer to change the carousel's properties depending on mobile or desktop.

    $resizeObserver.addEventListener('sl-resize', event => {
      const { target } = event.detail.entries[0]
      const carouselWidth = target.getBoundingClientRect().width

      if (carouselWidth  <= 768) {
        target.setAttribute('pagination', true)
        target.removeAttribute('navigation')
      } else {
        target.removeAttribute('pagination')
        target.setAttribute('navigation', true)
      }
    });

if there is a better way to handle that please let me know :)

To Reproduce

Steps to reproduce the behavior:

  1. clone my repo: https://github.com/colin-as/sl-carousel-bug
  2. open in your browser
  3. compare the order of the slides when the loop parameter is applied

Demo

Demo Repo: https://github.com/colin-as/sl-carousel-bug

Browser / OS

  • OS: Mac
  • Browser: Chrome
  • Browser version: 124.0.6367.62 (Official Build) (arm64)

Additional information

Provide any additional information about the bug here.

Thank you!

@colin-domaine colin-domaine added the bug Things that aren't working right in the library. label Apr 22, 2024
@claviska
Copy link
Member

Here's a reduced test case demonstrating the issue: https://codepen.io/claviska/pen/gOVvQmO?editors=1000

@claviska claviska added the help wanted Ready for a contributor to tackle. label Oct 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Things that aren't working right in the library. help wanted Ready for a contributor to tackle.
Projects
None yet
Development

No branches or pull requests

2 participants