Add experiences slider

content/experiences/index.md

@@ -27,14 +27,8 @@ weight: 5
 <!-- section 2 -->
 
 {% row(margin="withContainer" padding="both") %}
-<div id="gallery-hash-experiences">
 
-<a style="background-color: transparent">
+<div id="inline-gallery-container" class="inline-gallery-container"></div>
-
-![Image](./img/exp_book.jpg#mx-auto)
-
-</a>
-</div>
 
 |||
 

css/index.css

@@ -437,6 +437,20 @@ header {
 .header:hover .back {
   transform: none;
 }
+.inline-gallery-container {
+  width: 100%;
+  height: 0;
+  padding-bottom: 65%;
+}
+.lg-next {
+  right: 0;
+}
+.lg-backdrop {
+  background-color: transparent !important;
+}
+.lg-next, .lg-prev {
+  color: #000
+}
 @media (max-width: 768px) {
   h2 {
     font-size: 4rem;

static/js/custom.js

@@ -226,13 +226,14 @@ if (document.getElementById("gallery-hash-restaurant-2") !== null) {
 }
 
 // Experiences
-if (document.getElementById("gallery-hash-experiences") !== null) {
+const lgContainer = document.getElementById("inline-gallery-container");
-  const experiences = lightGallery(
+const inlineGallery = lightGallery(lgContainer, {
-    document.getElementById("gallery-hash-experiences"),
+  container: lgContainer,
-    {
+  download: false,
   dynamic: true,
-      hash: false,
+  closable: false,
-      galleryId: 2,
+  counter: false,
+  slideDelay: 300,
   dynamicEl: [
     { src: "../images/experiences/exper1.jpg" },
     { src: "../images/experiences/exper2.jpg" },
@@ -243,12 +244,6 @@ if (document.getElementById("gallery-hash-experiences") !== null) {
     { src: "../images/experiences/exper7.jpg" },
     { src: "../images/experiences/exper8.jpg" },
   ],
-    }
+});
-  );
 
-  document
+inlineGallery.openGallery();
-    .getElementById("gallery-hash-experiences")
-    .addEventListener("click", function () {
-      experiences.openGallery(0);
-    });
-}