↔️ Initial width of slide is not following `itemsToShow` settings

[opuu]

Slide width is not full-width until the screen resizes even if configuration is set to :itemsToShow="1" and :itemsToScroll="1"

Initial load:

After resize:

To Reproduce Steps to reproduce the behavior:

Any demo code from the website with :itemsToShow="1" and :itemsToScroll="1".

Expected behavior Slides should have 100% width on initial load.

Desktop:

• OS: Windows 11
• Browser Chrome
• Version 112.0.5615.49

Smartphone:

• Device: Samsung Galaxy M31
• OS: Android 12
• Browser Chrome
• Version 112.0.5615.47

Additional context Scrolling the slider out of viewport and bringing it back fixes the problem on phone.

[ismail9k]

If you navigate from mobile or desktop to the examples page, are you still able to generate the issue? note that the first carousel has configs (:itemsToShow="1" and :itemsToScroll="1").

I want you to help me debug this issue if you could provide me with a working example that generates the same issue. Maybe you could extract the current carousel to a codesandbox it would be helpful. Thanks in advance

[opuu]

Fresh installation of Vue with vue3-carousel seems to be working fine. I am using it along with Vant, I will try to reproduce it using Vant soon.

Similar case was noticed with bootstrap with nuxt 3. I will let you know if I can reproduce it.

[ismail9k]

Thank you for that 🙏

[opuu]

Could not reproduce the issue on codesandbox.

My current fix is faking a screen resize event:

setTimeout(() => {
  window.dispatchEvent(new Event("resize"));
}, 1000);

[ismail9k]

Using one of the carousel methods would be better

setTimeout(() => {
  carouselRef.updateSlideWidth();

  // OR
  carouselRef.restartCarousel();
}, 1000);