Indicators causing bug in Carousel: "invalid array length"

[ddavisj]

Environment

• Operating System: Linux
• Node Version: v18.16.1
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, colorMode, css, runtimeConfig, modules, device, compatibilityDate
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @pinia/[email protected], @nuxt/[email protected]

Version

v2.18.4

Reproduction

N/A - website is still in beta, not ready for launch/links

Description

Carousel appears to be working. When included, the indicator buttons do appear and work but also throw an error in the JS console. The arrows also work.

HTML

      <UCarousel
         v-slot="{ item }"
         :items="photos"
         :ui="{
            item: 'basis-full',
            indicators: {
               active: 'bg-primary-500 dark:bg-white',
               inactive: 'bg-gray-700 dark:bg-gray-900 mix-blend-overlay',
            },
         }"
         class="sm:rounded overflow-hidden"
         :prev-button="{
            color: 'gray',
            icon: 'i-heroicons-chevron-left',
         }"
         :next-button="{
            color: 'gray',
            icon: 'i-heroicons-chevron-right',
         }"
         arrows
      >
         <!-- indicators -->

JS console error

runtime-core.esm-bundler.js?v=87832025:1627 

Uncaught (in promise) RangeError: Invalid array length
    at renderList (runtime-core.esm-bundler.js?v=87832025:1627:11)
    at Proxy._sfc_render (Carousel.vue:195:67)
    at renderComponentRoot (runtime-core.esm-bundler.js?v=87832025:6286:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?v=87832025:5044:26)
    at ReactiveEffect.run (reactivity.esm-bundler.js?v=87832025:150:19)
    at instance.update (runtime-core.esm-bundler.js?v=87832025:5097:17)
    at callWithErrorHandling (runtime-core.esm-bundler.js?v=87832025:200:33)
    at flushJobs (runtime-core.esm-bundler.js?v=87832025:413:9)

Additional context

No response

Logs

No response

[selemondev]

Hey there @ddavisj, you can fix the above issue by removing the v-slot="{ item }" from the UCarousel component.

[ddavisj]

Hey there @ddavisj, you can fix the above issue by removing the v-slot="{ item }" from the UCarousel component.

Thanks @selemondev, I just tried removing this line and it broke the functionality. The images no longer appear at all. The error seems to act intermittently, it's not appearing - not sure why but will update this page if it reoccurs.

[selemondev]

Hey there @ddavisj, here is an example of one:

[starritree]

The problem was not solved. Does anyone have another solution?

[EdmundChaplin]

I have reproduced this below.

<template>
  <div class="w-full">
    <UCarousel
      v-slot="{ item }"
      :items="items"
      :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }"
      indicators
      class="rounded-lg overflow-hidden"
    >
      <img :src="item" class="w-full">
    </UCarousel>
  </div>
</template>

<script setup>
const items = [
  'https://picsum.photos/600/600?random=1',
]
</script>

This issues seems to be caused by the pages property in Carousel.vue, and happens when the length of the items prop is less than the number of carousel pages.

The number of pages is calculated from the width of the carousel and each item, which can be set multiple ways such as
:ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }" or <img :src="item" class="w-[400px]" draggable="false">

const pages = computed(() => {
  if (!itemWidth.value) {
    return 0;
  }
  return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
});

In my case I was using this carousel to show recently viewed products, however when you first enter the site you may only have one recently viewed product, and so this issue occurred.

I have also tried removing v-slot="{ item }" as above to no avail.

<template>
  <div class="w-full">
    <UCarousel
      :items="items"
      indicators
      class="rounded-lg overflow-hidden"
    >
      <template #default="{ item }">
        <img :src="item" class="w-[400px]">
      </template>
    </UCarousel>
  </div>
</template>

<script setup>
const items = [
  'https://picsum.photos/600/600?random=1',
]
</script>

Something like this seems to fix it:

const pages = computed(() => {
  if (!itemWidth.value) {
    return 0;
  }

  if (props.items.length < (Math.round(carouselWidth.value / itemWidth.value) + 1)) {
    return 0;
  }

  return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
});