SwiperPrimitive

The slide track (.swiper-wrapper) of a SwiperRootPrimitive carousel; holds the slides and emits click.

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

The .swiper-wrapper element of a primitive carousel. Place it as the first child of SwiperRootPrimitive and put the slides (SwiperSlide or SwiperSlideImagePrimitive) inside it. See SwiperRootPrimitive for the full composition.

#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";

const partners = ["Agenzia Duomo", "Casa Navigli", "Immobiliare Brera", "Studio Isola"];
const openGallery = () => console.log("open fullscreen gallery");
</script>

<template>
  <SwiperRootPrimitive :swiper-options="{ slidesPerView: 2, loop: true, autoplay: { delay: 2000 } }">
    <SwiperPrimitive @click="openGallery">
      <SwiperSlide v-for="p in partners" :key="p">{{ p }}</SwiperSlide>
    </SwiperPrimitive>
  </SwiperRootPrimitive>
</template>

#Do / Don't

• Do use exactly one per SwiperRootPrimitive, as its direct child, with only slides inside.
• Do listen for click here (the root's own click is never emitted). Pagination and arrows stop their clicks, so they don't trigger it.
• class lands on the .swiper-wrapper element, e.g. vertical padding so slide shadows aren't clipped.

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string

Events

Name	Payload
click	[MouseEvent]

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.