Custom Swiper Scrollbar Fn

swiper-scrollbar/README.md

@@ -0,0 +1,24 @@
+# Swiper Scrollbar #
+This is scrollbar function made for idosell swiper.
+
+### How to use  ###
+To use it You need to inject the code right after you create Swiper.
+
+new IdmSwiperProgress(swiperFn, swiperSelector);
+
+```
+...
+
+// Instalacja slidera dla instagrama
+const setupSliderResult = await slider.setupSlider({
+    element: sliderWrapper,
+});
+
+new IdmSwiperProgress(setupSliderResult, "#instagram .swiper");
+
+...
+```
+
+---
+
+Created by **[IdoMods](https://idomods.pl/)** 2025

swiper-scrollbar/scrollbar.js

@@ -0,0 +1,108 @@
+/*
+==============================================================
+*/
+// SWIPER PASEK
+class IdmSwiperProgress {
+  constructor(swiper, selector) {
+    this.swiper = swiper?.slider?.slider ?? swiper?.slider ?? swiper;
+    this.selector = selector;
+    this.scrollbarEl = null;
+    this.progressEl = null;
+    this.isDragging = false;
+
+    this.init();
+  }
+
+  init() {
+    const el = document.querySelector(this.selector);
+    if (!el || el.querySelector(".idm-scrollbar")) return;
+
+    el.insertAdjacentHTML(
+      "beforeend",
+      `<div class="idm-scrollbar swiper-scrollbar"><div class="idm-progress"></div></div>`
+    );
+
+    this.scrollbarEl = el.querySelector(".idm-scrollbar");
+    this.progressEl = this.scrollbarEl.querySelector(".idm-progress");
+
+    this.updateBarWidth();
+    this.addDragTracking();
+
+    this.swiper.on("progress", () => this.updateProgress());
+    this.swiper.on("breakpoint", () => {this.updateBarWidth()});
+  }
+
+  updateBarWidth() {
+    const { slidesPerGroup, slidesPerView } = this.swiper.params;
+    const totalSlides = this.swiper.slides.length;
+
+    const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
+    this.progressEl.style.width = `${progressWidth}%`;
+
+    if (progressWidth >= 100 || progressWidth <= 0) this.scrollbarEl.style.display = "none";
+    else this.scrollbarEl.style.display = "";
+  }
+
+  updateProgress() {
+    const progress = this.swiper.progress;
+    const { slidesPerGroup, slidesPerView } = this.swiper.params;
+    const totalSlides = this.swiper.slides.length;
+
+    const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
+    const newLeft = (100 - progressWidth) * progress;
+    this.progressEl.style.left = `${Math.min(
+      100 - progressWidth,
+      Math.max(0, newLeft)
+    )}%`;
+  }
+
+  addDragTracking() {
+    const handle = this.progressEl;
+    let grabOffset = 0;
+    let scrollbarWidth = 0;
+    let handleWidth = 0;
+
+    const startDrag = (e) => {
+      this.isDragging = true;
+      this.scrollbarEl.classList.add("--drag-start");
+
+      const rect = this.scrollbarEl.getBoundingClientRect();
+      const handleRect = handle.getBoundingClientRect();
+      scrollbarWidth = rect.width;
+      handleWidth = handleRect.width;
+
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      grabOffset = clientX - handleRect.left;
+
+      document.addEventListener("mousemove", handleDrag);
+      document.addEventListener("mouseup", stopDrag);
+      document.addEventListener("touchmove", handleDrag);
+      document.addEventListener("touchend", stopDrag);
+    };
+
+    const handleDrag = (e) => {
+      if (!this.isDragging) return;
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const rect = this.scrollbarEl.getBoundingClientRect();
+      let newLeftPx = clientX - rect.left - grabOffset;
+      const maxLeft = scrollbarWidth - handleWidth;
+      newLeftPx = Math.max(0, Math.min(maxLeft, newLeftPx));
+      const progress = newLeftPx / maxLeft;
+      this.swiper.setProgress(progress, 0);
+    };
+
+    const stopDrag = () => {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      document.removeEventListener("mousemove", handleDrag);
+      document.removeEventListener("mouseup", stopDrag);
+      document.removeEventListener("touchmove", handleDrag);
+      document.removeEventListener("touchend", stopDrag);
+      this.scrollbarEl.classList.remove("--drag-start");
+      this.swiper.slideReset(400);
+    };
+
+    handle.addEventListener("mousedown", startDrag);
+    handle.addEventListener("touchstart", startDrag);
+  }
+}

swiper-scrollbar/style.css

@@ -0,0 +1,21 @@
+/* SWIPER PROGRESS */
+.idm-scrollbar{
+    flex: 1;
+    height: 2px!important;
+    position: relative!important;
+    margin-top: 2rem;
+    cursor: grab;
+}
+.idm-scrollbar.--drag-start .idm-progress{
+    transition: none;
+}
+.idm-progress{
+    position: absolute;
+    z-index: 10;
+    height: calc(100% + 2px);
+    background-color: #0d0d0d;
+    left: 0;
+    top: -1px;
+    transition: all 0.3s;
+    border-radius: 5px;
+}