ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
653 stars 162 forks source link

How to use Slide's `isClone` property? #360

Open mkiselyow opened 4 months ago

mkiselyow commented 4 months ago

Is your feature request related to a problem? Please describe. I would like to add the tabindex properties to the <slide>'s slot content. This works well until the wrapAround is true. WrapAround adds the cloned slides, which unfortunately inherit the tabindex property so that the cloned nodes become reachable using the Tab key (even before they become visible.

<template>
  <div>
    <carousel
      v-model:model-value="currentPageIndex"
      :items-to-show="1"
      :wrap-around="true"
      @slide-end="onSlideEnd"
    >
      <slide
        v-for="(item, index) in banners"
        :key="'banner-' + item.id + index"
        :index="index"
      >
        <div
          v-if="item.button && item.button.url"
          role="button"
          class="hero-carousel-slide__link"
          :tabindex="currentPageIndex === index ? 0 : -1"
          @mouseup="mouseHandler(item.button.url)"
          @keyup.right="goToNext"
          @keyup.left="goToPrev"
          @keyup.enter="navigateToUrl(item.button.url)"
        >
          <img
            :src="item.url"
            :alt="item.title"
          >
        </div>
      </slide>
    </carousel>
  </div>
</template>

I thought the v-slot="{ isClone }" should be used, but it didn't work for me.

...
      <slide
        v-for="(item, index) in banners"
        v-slot="{ isClone }"
        :key="'banner-' + item.id + index"
        :index="index"
      >
        <div
          v-if="item.button && item.button.url"
          role="button"
          class="hero-carousel-slide__link"
          :tabindex="currentPageIndex === index && !isClone ? 0 : -1"
...

Describe the solution you'd like I would like to know how it is possible to use the isClone property (not from the $ref) to be able to mark only the proper slides with the tabindex property.

  :tabindex="currentPageIndex === index && !isClone ? 0 : -1"

Additional context I would appreciate any other options for marking the slide slot elements with tabindexes. Currently, I'm using the @slide-end="onSlideEnd" to remove all tabindexes from the cloned nodes with pure JS.

      function onSlideEnd () (
        document
          .querySelectorAll('.carousel__slide--clone ' + 'hero-carousel-slide__link')
          .forEach((el) => {
            if (el.tabIndex === 0) {
              el.tabIndex = -1
            }
          })
        }