Auto-hide navigation and disable interaction automatically when all items fit within the container

[kevinkosterr]

trafficstars

Is your feature request related to a problem? Please describe. As of right now, you'll always see the navigation or tabs even when the Slides fit perfectly within the container, which means you don't actually need them when wrapAround is disabled. To improve the UX and UI it would be nice to be able to disable navigation whenever it is not necessary. I am unable to come up with a work around without requiring a modification inside the component.

Describe the solution you'd like I would like to be able to pass a value inside the props that allows for navigation to stop working whenever they aren't needed. Meaning, navigation won't show up and no form of interaction would work when the slides don't overflow the container.

Describe alternatives you've considered One alternative I tried was keeping a ref of the Carousel component. Then calculating if the items were overflowing the container by doing:

<template>
 <Carousel ref="carousel">
  <!-- items here -->
  <template #addons>
    <Navigation v-if="isOverflowing"/>
  </template>
</Carousel>
</template>

<script setup>
import { useTemplateRef, computed } from 'vue'
import { Carousel, Navigation } from 'vue3-carousel'

const carousel = useTemplateRef('carousel')
const isOverflowing = computed(() => {
 if (!carousel.value) return false
 return (carousel.value.data.slideSize * carousel.value.data.slidesCount) > carousel.value.$el.scrollWidth
})

// Some resize handlers here and whatnot...
</script>

This works fine, however I am still able to navigate through the slides. Whenever I click on one, the container applies the transform CSS property and moves towards that slide.

I also looked at possibly using enabled to disable the entire carousel if no overflow was detected. The problem with this is that I can't pass this computed property (isOverflowing) because the slideSize and slideCount will be set to 0 if the carousel is disabled.

Additional context I will be opening a Pull Request as a proposed solution. Please let me know if I missed anything.

[ismail9k]

For now, since I don’t have the full carousel configuration, I’ll make an educated guess to help.

As of now, vue3-carousel does not have a built-in feature to automatically hide navigation controls when all slides fit within the container. However, you have already implemented a valid workaround.

You could also try the following approach if config.itemsToShow !== 'auto':

const isOverflowing = computed(() => {
  if (!carousel.value) return false;
  return carousel.value.data.slidesCount > carousel.value.data.config.itemsToShow;
});

Issue: “I am still able to navigate through the slides even when navigation is hidden.”

By default, clicking on slides does not trigger navigation. If you are referring to dragging moving the slides, you might want to try setting the preventExcessiveDragging config option.

To provide better assistance, could you share a minimal working example that demonstrates your specific use case, including the full carousel setup? That would help identify the best approach to address this issue. 🚀