a Nuxt component for handling swipers
<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>
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}', |
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 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. |