Vue3 Carousel Setting track offset when slide count is less then the items to show property

Question

This seems to be specifically with version 0.3.1 but we can't roll back as 0.3.1 fixes a different bug we were having on the previous version.

We have a carousel setup which works fine when the number of cards matches the itemsToScroll property and they match the width of the container, but if the number of slides is less then the itemsToScroll, the track is offset by what seems to be the missing slide and the items are pushed to the right.

The carousel is setting an offset for no reason, not sure if it is getting confused with the item count or there is a setting we are completely missing.

Or settings are as follows:

const settings = { itemsToShow: 1, itemsToScroll: 1, snapAlign: 'start' }

const breakpoints = { 768: { itemsToShow: 2, }, 1024: { itemsToShow: 4, } }

So below is the view, the carousel should actually be aligned to the right and shoudn't be scrollable.

Red line is the carousel container Blue is the track which in this instance is offset with the following transform being applied:

{ transform: translateX(490.875px); transition: all 0ms ease 0s; width: 100%; }

Currently looking to patch the library but currently the style gets applied regardless even if the code that applies the style to the track is removed.

Answer 1

work around is just figuring out the items to show dynamically:

const breakpoints = {
  768: {
    itemsToShow: 2,
  },
  1024: {
    itemsToShow: props.items.length > 3 ? 4 : props.items.length,
  },
}