detail page port

components/slices/Carousel.vue

@@ -0,0 +1,50 @@
+<template>
+    <section
+        class="slices-carousel"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <slider :emblaOptions="{ loop: true }" controls>
+            <prismic-media
+                class="item"
+                v-for="item in items"
+                :image="item.image"
+                :video="item.video"
+                aspect="100"
+            />
+        </slider>
+    </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Slider from '@/components/Slider.vue'
+import PrismicMedia from '@/components/prismic/Media.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+
+const items = computed(() => props.slice?.primary?.items || [])
+</script>
+
+<style lang="scss">
+.slices-carousel {
+    margin-top: desktop-vw(100px);
+    margin-bottom: desktop-vw(100px);
+    position: relative;
+
+    .item {
+        width: desktop-vw(640px);
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(100px);
+        margin-bottom: mobile-vw(100px);
+
+        .item {
+            width: mobile-vw(300px);
+        }
+    }
+}
+</style>