Skip to content

limbo-works/Limbo.Nuxt.SwiperWrap

Repository files navigation

SwiperWrap

a Nuxt component for handling swipers

Basic usage

<SwiperWrap
  :move-by="1"
  :class=""
  :items-wrapper-class-names=""
>

  <template #before="{ showPagination, go }">
    <div>
      <button
        :aria-disabled="!showPagination.previous"
        aria-label="Gå til forrige"
        @click="() => go.previous(false)"
      >
        prev
      </button>
      <button
        :aria-disabled="!showPagination.next"
        aria-label="Gå til næste"
        @click="() => go.next(false)"
      >
        next
      </button>
    </div>
  </template>

  <template #items>
    <div
      v-for="item in list"
      :key="item"
    >
      ...
    </div>
  </template>

  <template #default="{ pagination }">
    <div
      v-if="images[pagination.index]"
    >
      <span
        v-if="images.length > 1"
        class="
          text-image-pagination
        "
        v-text="`${pagination.index + 1} / ${pagination.count}`"
      ></span>
    </div>
  </template>

</Swiperwrap>

Available configuration

Props

Prop Description
tag tag of container element. Default: 'section'
moveBy How many items should a single go.next() or go.prev() move. Default: -1
itemsWrapperClassNames A string of classes to add to wrapper div and components
setIndex start index. Default: 0
screenReaderTemplate A template string for status element in screenreaders. Default: 'Viser slide #{active} af #{total}',

Available slots

Slot name Description
default content placed after items container
before content placed before items container
items Items container
custom used to overwrite all behaviour, wraps all other slots

Slot props available for all slots

Slot name Description
state.scrollable Boolean. is scrollable
state.inView Array. Items in view.
go.previous() Function. Move back by specied moveBy amount
go.next() Function. Move forward by specied moveBy amount
go.to() Function. Move to specied index
pagination.index Int. Currentindex, first of shown items
pagination.count Int. Total number of items.
showPagination.next Boolean. Should next button be shown.
showPagination.previous Boolean. Should previous button be shown.
showPagination.either Boolean. Should either previous or next button be shown.
showPagination.both Boolean. Should both previous and next button be shown.
methods.updateCurrent() Function. Updates pagination.index and state.inView items. (happens in default use-cases automatically)
methods.goToFocused() Function. Updates pagination.index and state.inView items to go from element in focus.