SwiperSlide

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

A single slide. Put one SwiperSlide per item in the default slot of SwiperCarousel, or inside SwiperPrimitive when composing primitives (see SwiperRootPrimitive). It renders .swiper-slide > .swiper-zoom-container > your content.

The inner zoom container is a centered flex box filling the slide, so content is centered horizontally and vertically, and a direct <img> child is fitted with object-fit: contain.

#Usage

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

const agents = ["Giulia Rossi", "Marco Bianchi", "Sara Esposito"];
</script>

<template>
  <SwiperCarousel id="agents" :swiper-options="{ slidesPerView: 1, pagination: true }">
    <SwiperSlide v-for="name in agents" :key="name">
      <div class="agent">{{ name }} · Agente immobiliare, Napoli</div>
    </SwiperSlide>
  </SwiperCarousel>
</template>

<style scoped>
.agent { width: 100%; padding: 24px; }
</style>

#Do / Don't

• Do give slide content width: 100% when it should fill the slide; otherwise it shrinks to its content and sits centered.
• class and other attributes land on the .swiper-slide element (e.g. margins for room under the pagination).
• Don't set the slide's width yourself; Swiper computes it from slidesPerView and spaceBetween.

#API

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

Props

None.

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.