SwiperSlideImagePrimitive

A slide holding one image, with optional deferred loading driven by SwiperRootPrimitive or SwiperThumbnailPrimitive.

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

A SwiperSlide containing a single <img>, for photo galleries built from primitives. With lazy, the image is rendered without src (as data-src / data-srcset) and the surrounding SwiperRootPrimitive or SwiperThumbnailPrimitive sets the real source only when the slide is on screen or near it, so a 30-photo gallery doesn't download 30 photos up front. 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 SwiperSlideImagePrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperSlideImagePrimitive";

const photos = ["/img/attico-1.jpg", "/img/attico-2.jpg", "/img/attico-3.jpg"];
</script>

<template>
  <SwiperRootPrimitive class="card-photos" :swiper-options="{ rewind: true }">
    <SwiperPrimitive>
      <SwiperSlideImagePrimitive
        v-for="(src, i) in photos"
        :key="src"
        :src="src"
        :alt="`Attico a Roma, foto ${i + 1}`"
        :width="343"
        :height="184"
        :lazy="i > 0"
        img-classes="card-photos__img"
      />
    </SwiperPrimitive>
  </SwiperRootPrimitive>
</template>

<style scoped>
.card-photos :deep(.card-photos__img) { width: 100%; height: 184px; object-fit: cover; }
</style>

#Do / Don't

• Do use lazy only inside SwiperRootPrimitive or SwiperThumbnailPrimitive; anywhere else (including SwiperCarousel) a lazy image never loads.
• Do leave the first visible image non-lazy, ideally with fetchpriority="high".
• Do style the image with img-classes. class and other attributes (data-*, itemprop) land on the slide <div>, not the <img>.
• To crop with object-fit: cover, use a selector stronger than one class (as above) or !important: Swiper's zoom stylesheet sets object-fit: contain on slide images.
• lazy is read once when the slide is created.

#API

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

Props

Name	Type	Default	Required	Description
src	string
srcset	string
alt	string
width	number
height	number
sizes	string
imgClasses	ClassTypeProp
decoding	"auto" | "sync" | "async"
crossorigin	"anonymous" | "use-credentials"
fetchpriority	"auto" | "high" | "low"
loading	"lazy" | "eager"
lazy	boolean

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.