wip: cart

spa/src/components/ProductImageSwiper.vue

@@ -0,0 +1,74 @@
+<template>
+  <swiper
+      :style="{
+      '--swiper-navigation-color': '#fff',
+      '--swiper-pagination-color': '#fff',
+    }"
+      :lazy="true"
+      :pagination="pagination"
+      :navigation="true"
+      :modules="modules"
+      class="mySwiper"
+  >
+    <swiper-slide v-for="image in images">
+      <img
+          :src="image.url"
+          :alt="image.alt"
+          loading="lazy"
+      />
+      <div
+          class="swiper-lazy-preloader swiper-lazy-preloader-white"
+      ></div>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script>
+import {Swiper, SwiperSlide} from 'swiper/vue';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+
+import {Pagination} from 'swiper/modules';
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+
+  props: {
+    images: {
+      type: Array,
+      default: () => [],
+    }
+  },
+
+  setup() {
+    return {
+      pagination: {
+        clickable: true,
+        dynamicBullets: true,
+      },
+      modules: [Pagination],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.product-swiper {
+  width: 100%;
+  height: auto;
+}
+
+.swiper-slide {
+  text-align: center;
+}
+
+img {
+  width: 100%;
+  display: block;
+  object-fit: contain;
+}
+</style>