install swiper, start styling image gallery

web/package-lock.json

@@ -21,6 +21,7 @@
         "react-dom": "^18",
         "react-intersection-observer": "^9.10.2",
         "sass": "^1.77.2",
+        "swiper": "^11.1.3",
         "urql": "^4.1.0"
       },
       "devDependencies": {
@@ -8026,6 +8027,24 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.3.tgz",
+      "integrity": "sha512-80MSxonyTxrGcaWj9YgvvhD8OG0B9/9IVZP33vhIEvyWvmKjnQDBieO+29wKvMx285sAtvZyrWBdkxaw6+D3aw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

web/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18",
     "react-intersection-observer": "^9.10.2",
     "sass": "^1.77.2",
+    "swiper": "^11.1.3",
     "urql": "^4.1.0"
   },
   "devDependencies": {

web/src/components/blocks/ImageSliderBlock.tsx

@@ -1,7 +1,16 @@
+"use client";
 import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
 import Image from "../general/Image";
 import styles from "./imageSliderBlock.module.scss";
 
+// import swiper modules & styles
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination, Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "./swiper.scss";
+
 export const ImageSliderBlock = ({
   block,
 }: {
@@ -9,13 +18,32 @@ export const ImageSliderBlock = ({
 }) => {
   return (
     <div className={styles.imageSliderBlock}>
-      {block.images &&
-        block.images.map((imageItem: any) => (
-          <div key={imageItem.image.id}>
-            <div>{imageItem.image.url}</div>
-            <div>{imageItem.text}</div>
-          </div>
-        ))}
+      <Swiper
+        pagination={{
+          type: "fraction",
+        }}
+        navigation={true}
+        modules={[Pagination, Navigation]}
+        className="mySwiper"
+      >
+        {block.images &&
+          block.images.map((imageItem: any, index: number) => (
+            <SwiperSlide key={index}>
+              <figure key={imageItem.image.id}>
+                <Image
+                  src={imageItem.image.url}
+                  alt={imageItem.image.alt ?? ""}
+                  width={imageItem.image.width}
+                  height={imageItem.image.height}
+                  // width={0}
+                  // height={0}
+                  // sizes="20vw"
+                />
+                {imageItem.text && <figcaption>{imageItem.text}</figcaption>}
+              </figure>
+            </SwiperSlide>
+          ))}
+      </Swiper>
     </div>
   );
 };

web/src/components/blocks/imageSliderBlock.module.scss

@@ -0,0 +1,35 @@
+.imageSliderBlock {
+  height: 90vh;
+  background: var(--color-black);
+  color: var(--color-goldenBeige);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+
+  figure {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    img {
+      display: block;
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+      min-height: 0;
+    }
+
+    figcaption {
+      position: absolute;
+      bottom: 0;
+      max-width: var(--size-width-p);
+      margin: 0 auto;
+      padding: .75rem 1rem;
+      font-size: var(--font-size-caption);
+      line-height: 1.4;
+      background: rgba(0, 0, 0, .6);
+    }
+  }
+}

web/src/components/blocks/imageWithTextBlock.module.scss

@@ -3,6 +3,7 @@
   margin: 0;
 
   img {
+    display: block;
     max-width: 100%;
     height: auto;
   }
@@ -11,7 +12,7 @@
     width: 100%;
     max-width: var(--size-width-p);
     margin: 0 auto;
-    padding: .5rem 0 1rem;
+    padding: 1rem 0;
     font-size: var(--font-size-caption);
     line-height: 1.4;
     opacity: .8;

web/src/components/blocks/swiper.scss

@@ -0,0 +1,98 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {}
+
+.swiper-button-next,
+.swiper-button-prev {
+  &:before {
+    content: "→";
+    display: block;
+    padding: var(--spacing-sitepadding-inline);
+    font-size: var(--font-size-h3);
+    position: absolute;
+    color: var(--color-goldenBeige);
+  }
+}
+
+.swiper-button-next {
+  &:before {
+    content: "→";
+    right: 0;
+  }
+
+  &:after {
+    content: "Neste";
+    visibility: hidden;
+  }
+}
+
+.swiper-button-prev {
+  &:before {
+    content: "←";
+    left: 0;
+  }
+
+  &:after {
+    content: "Forrige";
+    visibility: hidden;
+  }
+}
+
+.swiper-pagination {
+  padding-top: var(--spacing-sitepadding-inline);
+  padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
+  position: absolute;
+  top: 0;
+  bottom: auto;
+  text-align: left;
+}
+
+@media (max-width: 1100px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    &:before {
+      padding: 1rem;
+      font-size: var(--font-size-h5);
+    }
+  }
+}
+
+@media (max-width: 800px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    bottom: 1rem;
+    top: auto;
+
+    &:before {
+      padding: 1rem;
+      font-size: var(--font-size-h5);
+    }
+  }
+
+  .swiper-pagination {
+    padding-top: 1.75rem;
+  }
+
+  .swiper-slide {
+
+    figure {
+      width: 100vw;
+      height: 60vh;
+      margin-bottom: 2rem;
+
+      figcaption {
+        position: absolute;
+        bottom: 5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        padding: 0 2rem;
+      }
+    }
+  }
+}