Slider width isn't calculated properly

[IamMilev]

Carousel slide isn't calculating the right slide width. I am passing itemsToShow to be one and receive 4 items.

const carouselSettings = { itemsToShow: 1, itemsToScroll: 1, autoplay: 5000, wrapAround: true, snapAlign: "center", };

[IamMilev]

I think I found what is the issue, on mount it gets the width of the carousel section which is 254px and after populating the slides it doesn't recalculate the proper slide width

[josepuma]

I'm having the same issue using nuxt3 :/

[tinkerbaj]

Same issue

[tinkerbaj]

I fix it by adding absolute to element inside slider

[dbelouslv]

I have the same issue, but my carousel located in tabs. I have just added <Carousel v-if="currentTabIndex === 1" and it is works for me, because due v-if every time when I open second tab (index 1) works rendering and adjusts width

[RamaHerbin]

EDIT : Fixed by triggering window rezise with this following code :

onMounted(() => {

  // Fix vue3-carousel wrong width bug
  setTimeout(() => {
    console.log("fake res");
    if (process.client) {
      window.dispatchEvent(new Event("resize"));
    }
  }, 1000);
});

I have the same problem, is it possible to disable this fixed width so the width: 100% can take effect ?

[ismail9k]

@RamaHerbin Instead of triggering window resize you could directly reset the carousel values by using this method

Dynamic widths are generated based on the number of slides to view and items to show, to overwrite it you could use width: 100% !important

[RamaHerbin]

This works perfectly. Thank you

[ismail9k]

Fixed in v0.2.24