first commit

2024-09-19 16:06:49 +05:00
commit b686638a39
1664 changed files with 428174 additions and 0 deletions
@@ -0,0 +1,85 @@
+<template>
+	<div class="relative">
+		<div class="flex">
+			<div
+					v-for="(item, index) in items"
+					:key="index"
+					class="w-full"
+					:class="{ 'block': currentIndex === index, 'hidden': currentIndex !== index }"
+			>
+				<img
+						@click="openLightboxOnSlide(index + 1)"
+						:src="'/storage/' + item"
+						class="mx-auto max-h-[500px] object-cover rounded-md hover:opacity-95 hover:duration-200 transition"
+				/>
+			</div>
+		</div>
+		<button
+				class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+				@click="prevSlide"
+		>
+			&#10094;
+		</button>
+		<button
+				class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+				@click="nextSlide"
+		>
+			&#10095;
+		</button>
+	</div>
+
+	<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
+		{{ block.data.alt }}
+	</figcaption>
+
+
+
+	<FsLightbox class="" :slide="slide" :toggler="toggler" :sources="items.map(item => domainPath + '/storage/' + item)"/>
+
+</template>
+
+<script>
+import FsLightbox from "fslightbox-vue/v3";
+
+export default {
+	name: "ClientImageSlider",
+	components: { FsLightbox },
+	data() {
+		return {
+			currentIndex: 0,
+			items: this.block.data.url,
+			toggler: false,
+			domainPath: null,
+			slide: null,
+		};
+	},
+	props: {
+		block: {
+			type: Array,
+		},
+	},
+	methods: {
+		prevSlide() {
+			if (this.currentIndex === 0) {
+				this.currentIndex = this.items.length - 1;
+			} else {
+				this.currentIndex--;
+			}
+		},
+		nextSlide() {
+			if (this.currentIndex === this.items.length - 1) {
+				this.currentIndex = 0;
+			} else {
+				this.currentIndex++;
+			}
+		},
+		openLightboxOnSlide: function(number) {
+			this.slide = number;
+			this.toggler = !this.toggler;
+		}
+	},
+	mounted() {
+		this.domainPath = window.location.origin;
+	},
+};
+</script>