add swiper

main.js

@@ -10,6 +10,7 @@
 // @require https://code.jquery.com/jquery-3.7.1.min.js
 // @require https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
 // @require https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js
+// @require https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js
 // ==/UserScript==
 
 (function () {
@@ -113,11 +114,10 @@
 
     if (type == "img") {
       displayedFile.src = preview
+      displayedFile.dataset.origin = file
       displayedFile.addEventListener("click", () => {
         let dialog = document.querySelector("dialog")
-        let dialogFile = displayedFile.cloneNode(true)
+        makeSwiper(dialog, fileListContainer, file)
-        dialogFile.src = file
-        dialog.appendChild(dialogFile)
         dialog.showModal()
       })
     }
@@ -210,7 +210,7 @@
         displayedFile.file = file
         displayedFile.addEventListener("click", () => {
           let dialog = document.querySelector("dialog")
-          dialog.appendChild(displayedFile.cloneNode(true))
+          makeSwiper(dialog, fileListContainer, displayedFile.src)
           dialog.showModal()
         })
 
@@ -414,6 +414,51 @@
     elList.forEach(el => el.classList.remove("hidden"))
   }
 
+  function makeSwiper(dialog, fileListContainer, src) {
+    let files = [...fileListContainer.querySelectorAll(`:is(.preview, .preview-small)`)]
+
+    let swiperDiv = document.createElement("div")
+    swiperDiv.classList.add("swiper")
+
+    let swiperWrapper = document.createElement("div")
+    swiperWrapper.classList.add("swiper-wrapper")
+
+    for (const file of files) {
+      let swiperFile = file.cloneNode(true)
+      if (swiperFile.dataset.origin)
+        swiperFile.src = swiperFile.dataset.origin
+
+      swiperFile.classList.add("swiper-slide")
+      swiperWrapper.appendChild(swiperFile)
+    }
+
+    swiperDiv.appendChild(swiperWrapper)
+
+    let prevButton = document.createElement("div")
+    prevButton.classList.add("swiper-button-prev")
+    swiperDiv.appendChild(prevButton)
+
+    let nextButton = document.createElement("div")
+    nextButton.classList.add("swiper-button-next")
+    swiperDiv.appendChild(nextButton)
+
+    dialog.appendChild(swiperDiv)
+
+    console.log(src)
+    console.log(files.map(it => it.src))
+    console.log(files.findIndex(el => el.dataset.origin && el.dataset.origin === src || el.src === src))
+
+    new Swiper('.swiper', {
+      initialSlide: files.findIndex(el => el.dataset.origin && el.dataset.origin === src || el.src === src),
+    
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    })
+
+  }
+
   let styles = `
     #content-wrapper {
       display: flex;
@@ -649,11 +694,18 @@
       cursor: zoom-in;
     }
 
-    dialog .preview {
+    dialog .preview,
+    .swiper {
       max-width: 1000px;
       max-height: 600px;
     }
 
+    .swiper-button-next,
+    .swiper-button-prev {
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
     button.button-delete {
       padding: 0;
       border: 0;
@@ -694,6 +746,7 @@
 
   addCss("https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css")
   addCss('https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css')
+  addCss("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css")
 
   /* NEW DEFALUT VALUES */