|
| 1 | +<script setup> |
| 2 | +// noinspection NpmUsedModulesInstalled |
| 3 | +import { ref } from 'vue' |
| 4 | +import { Swiper, SwiperSlide } from 'swiper/vue' |
| 5 | +import { Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow } from 'swiper/modules' |
| 6 | +import 'swiper/css' |
| 7 | +import 'swiper/css/navigation' |
| 8 | +import 'swiper/css/pagination' |
| 9 | +import 'swiper/css/effect-coverflow' |
| 10 | +
|
| 11 | +const props = defineProps({ |
| 12 | + baseUrl: { type: String, required: true }, |
| 13 | + numberOfSlides: { type: Number, required: true }, |
| 14 | + slidesPerView: { type: Number, default: 1 }, |
| 15 | + breakpoints: { type: Object, default: () => ({}) }, |
| 16 | + lazyPreloadPrevNext: { type: Number, default: 2 }, |
| 17 | + height: { type: String, default: '496px' }, |
| 18 | + buttonText: { type: String, default: 'View in Fullscreen' }, |
| 19 | + keyboard: { type: Boolean, default: true }, |
| 20 | + mousewheel: { type: Boolean, default: true }, |
| 21 | + navigation: { type: Boolean, default: true }, |
| 22 | + grabCursor: { type: Boolean, default: true }, |
| 23 | + loop: { type: Boolean, default: true }, |
| 24 | +}) |
| 25 | +
|
| 26 | +const swiperEl = ref(null) |
| 27 | +const requestFullscreen = () => { |
| 28 | + // noinspection JSUnresolvedReference |
| 29 | + swiperEl?.value?.$el?.requestFullscreen?.() |
| 30 | +} |
| 31 | +</script> |
| 32 | +
|
| 33 | +<style> |
| 34 | +:root { |
| 35 | + --swiper-pagination-fraction-color: var(--vp-c-purple-1); |
| 36 | + --swiper-navigation-color: var(--vp-c-purple-1); |
| 37 | + --swiper-navigation-sides-offset: 4px; |
| 38 | +} |
| 39 | +
|
| 40 | +.swiper { |
| 41 | + background-color: var(--vp-code-block-bg); |
| 42 | + border-radius: 8px; |
| 43 | +} |
| 44 | +
|
| 45 | +.swiper img { |
| 46 | + width: 100%; |
| 47 | + height: 100%; |
| 48 | + object-fit: contain; |
| 49 | +} |
| 50 | +
|
| 51 | +.inline-button { |
| 52 | + font-weight: bold; |
| 53 | + display: inline-flex; |
| 54 | + align-items: center; |
| 55 | + gap: 0.5rem; |
| 56 | +} |
| 57 | +</style> |
| 58 | +
|
| 59 | +<template> |
| 60 | + <button @click="requestFullscreen" class="inline-button"> |
| 61 | + <svg |
| 62 | + xmlns="http://www.w3.org/2000/svg" |
| 63 | + width="24" |
| 64 | + height="24" |
| 65 | + viewBox="0 0 24 24" |
| 66 | + fill="none" |
| 67 | + stroke="currentColor" |
| 68 | + stroke-width="2" |
| 69 | + stroke-linecap="round" |
| 70 | + stroke-linejoin="round" |
| 71 | + class="lucide lucide-fullscreen-icon lucide-fullscreen" |
| 72 | + > |
| 73 | + <path d="M3 7V5a2 2 0 0 1 2-2h2" /> |
| 74 | + <path d="M17 3h2a2 2 0 0 1 2 2v2" /> |
| 75 | + <path d="M21 17v2a2 2 0 0 1-2 2h-2" /> |
| 76 | + <path d="M7 21H5a2 2 0 0 1-2-2v-2" /> |
| 77 | + <rect width="10" height="8" x="7" y="8" rx="1" /> |
| 78 | + </svg> |
| 79 | + <span>{{ props.buttonText }}</span> |
| 80 | + </button> |
| 81 | +
|
| 82 | + <ClientOnly> |
| 83 | + <Swiper |
| 84 | + ref="swiperEl" |
| 85 | + :modules="[Keyboard, Mousewheel, Navigation, Pagination, EffectCoverflow]" |
| 86 | + :slides-per-view="props.slidesPerView" |
| 87 | + :breakpoints="props.breakpoints" |
| 88 | + :pagination="{ clickable: true, type: 'fraction' }" |
| 89 | + :coverflow-effect="{ slideShadows: false }" |
| 90 | + :keyboard="props.keyboard" |
| 91 | + :mousewheel="props.mousewheel" |
| 92 | + :navigation="props.navigation" |
| 93 | + :grab-cursor="props.grabCursor" |
| 94 | + :loop="props.loop" |
| 95 | + :lazy-preload-prev-next="props.lazyPreloadPrevNext" |
| 96 | + effect="coverflow" |
| 97 | + class="swiper" |
| 98 | + :style="{ height: props.height }" |
| 99 | + > |
| 100 | + <SwiperSlide v-for="i in props.numberOfSlides" :key="i"> |
| 101 | + <img :src="`${props.baseUrl}/${i}.jpg`" :alt="`Loading ${i}`" loading="lazy" /> |
| 102 | + </SwiperSlide> |
| 103 | + </Swiper> |
| 104 | + </ClientOnly> |
| 105 | +</template> |
0 commit comments