SwiperNavigationPrimitive

Swiper prev/next arrows for a SwiperRootPrimitive carousel.

import SwiperNavigationPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperNavigationPrimitive";

Adds Swiper's prev/next arrow buttons (.swiper-button-prev / .swiper-button-next, vertically centered on the sides) to a primitive carousel. Place it inside SwiperRootPrimitive, after SwiperPrimitive. options takes Swiper navigation options or true (default). See SwiperRootPrimitive for the full composition.

For arrows of your own design, skip this primitive and call slidePrev() / slideNext() on the Swiper instance the root gives you (@init or the exposed swiper).

#Usage

<script setup lang="ts">
import SwiperRootPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperRootPrimitive";
import SwiperPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperPrimitive";
import SwiperSlide from "@wikicasa-dev/components/generic/carousel/SwiperSlide";
import SwiperNavigationPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperNavigationPrimitive";
</script>

<template>
  <div class="tour">
    <SwiperRootPrimitive :swiper-options="{ slidesPerView: 1, rewind: true }">
      <SwiperPrimitive>
        <SwiperSlide v-for="room in ['Cucina', 'Soggiorno', 'Camera']" :key="room">{{ room }}</SwiperSlide>
      </SwiperPrimitive>
      <SwiperNavigationPrimitive />
    </SwiperRootPrimitive>
  </div>
</template>

<style scoped>
.tour { --swiper-navigation-color: rgb(var(--uikit-color-w-black)); --swiper-navigation-size: 30px; }
</style>

#Do / Don't

• Do render it unconditionally from the start; it registers with the root while the carousel is created. To hide arrows on small screens use Swiper breakpoints with navigation: { enabled: false } in the root's swiper-options.
• Don't put class on it: it renders two elements, so attributes are dropped. Style the arrows from an ancestor.

#Styling hooks

--swiper-navigation-color, --swiper-navigation-size (44px), --swiper-navigation-sides-offset; classes .swiper-button-prev, .swiper-button-next, .swiper-button-disabled.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
options	SwiperNavigationPrimitiveProps	true

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.