@gem-sdk/swiper 0.0.7

package/modules/scrollbar.mjs

@@ -0,0 +1,366 @@
+import { g as getDocument } from '../shared/ssr-window.esm.mjs';
+import { m as makeElementsArray, j as classesToTokens, c as createElement, n as nextTick, d as elementOffset } from '../shared/utils.mjs';
+import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
+import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
+
+function Scrollbar(_ref) {
+  let {
+    swiper,
+    extendParams,
+    on,
+    emit
+  } = _ref;
+  const document = getDocument();
+  let isTouched = false;
+  let timeout = null;
+  let dragTimeout = null;
+  let dragStartPos;
+  let dragSize;
+  let trackSize;
+  let divider;
+  extendParams({
+    scrollbar: {
+      el: null,
+      dragSize: 'auto',
+      hide: false,
+      draggable: false,
+      snapOnRelease: true,
+      lockClass: 'swiper-scrollbar-lock',
+      dragClass: 'swiper-scrollbar-drag',
+      scrollbarDisabledClass: 'swiper-scrollbar-disabled',
+      horizontalClass: `swiper-scrollbar-horizontal`,
+      verticalClass: `swiper-scrollbar-vertical`
+    }
+  });
+  swiper.scrollbar = {
+    el: null,
+    dragEl: null
+  };
+  function setTranslate() {
+    if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
+    const {
+      scrollbar,
+      rtlTranslate: rtl
+    } = swiper;
+    const {
+      dragEl,
+      el
+    } = scrollbar;
+    const params = swiper.params.scrollbar;
+    const progress = swiper.params.loop ? swiper.progressLoop : swiper.progress;
+    let newSize = dragSize;
+    let newPos = (trackSize - dragSize) * progress;
+    if (rtl) {
+      newPos = -newPos;
+      if (newPos > 0) {
+        newSize = dragSize - newPos;
+        newPos = 0;
+      } else if (-newPos + dragSize > trackSize) {
+        newSize = trackSize + newPos;
+      }
+    } else if (newPos < 0) {
+      newSize = dragSize + newPos;
+      newPos = 0;
+    } else if (newPos + dragSize > trackSize) {
+      newSize = trackSize - newPos;
+    }
+    if (swiper.isHorizontal()) {
+      dragEl.style.transform = `translate3d(${newPos}px, 0, 0)`;
+      dragEl.style.width = `${newSize}px`;
+    } else {
+      dragEl.style.transform = `translate3d(0px, ${newPos}px, 0)`;
+      dragEl.style.height = `${newSize}px`;
+    }
+    if (params.hide) {
+      clearTimeout(timeout);
+      el.style.opacity = 1;
+      timeout = setTimeout(() => {
+        el.style.opacity = 0;
+        el.style.transitionDuration = '400ms';
+      }, 1000);
+    }
+  }
+  function setTransition(duration) {
+    if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
+    swiper.scrollbar.dragEl.style.transitionDuration = `${duration}ms`;
+  }
+  function updateSize() {
+    if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
+    const {
+      scrollbar
+    } = swiper;
+    const {
+      dragEl,
+      el
+    } = scrollbar;
+    dragEl.style.width = '';
+    dragEl.style.height = '';
+    trackSize = swiper.isHorizontal() ? el.offsetWidth : el.offsetHeight;
+    divider = swiper.size / (swiper.virtualSize + swiper.params.slidesOffsetBefore - (swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));
+    if (swiper.params.scrollbar.dragSize === 'auto') {
+      dragSize = trackSize * divider;
+    } else {
+      dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
+    }
+    if (swiper.isHorizontal()) {
+      dragEl.style.width = `${dragSize}px`;
+    } else {
+      dragEl.style.height = `${dragSize}px`;
+    }
+    if (divider >= 1) {
+      el.style.display = 'none';
+    } else {
+      el.style.display = '';
+    }
+    if (swiper.params.scrollbar.hide) {
+      el.style.opacity = 0;
+    }
+    if (swiper.params.watchOverflow && swiper.enabled) {
+      scrollbar.el.classList[swiper.isLocked ? 'add' : 'remove'](swiper.params.scrollbar.lockClass);
+    }
+  }
+  function getPointerPosition(e) {
+    return swiper.isHorizontal() ? e.clientX : e.clientY;
+  }
+  function setDragPosition(e) {
+    const {
+      scrollbar,
+      rtlTranslate: rtl
+    } = swiper;
+    const {
+      el
+    } = scrollbar;
+    let positionRatio;
+    positionRatio = (getPointerPosition(e) - elementOffset(el)[swiper.isHorizontal() ? 'left' : 'top'] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);
+    positionRatio = Math.max(Math.min(positionRatio, 1), 0);
+    if (rtl) {
+      positionRatio = 1 - positionRatio;
+    }
+    const position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
+    swiper.updateProgress(position);
+    swiper.setTranslate(position);
+    swiper.updateActiveIndex();
+    swiper.updateSlidesClasses();
+  }
+  function onDragStart(e) {
+    const params = swiper.params.scrollbar;
+    const {
+      scrollbar,
+      wrapperEl
+    } = swiper;
+    const {
+      el,
+      dragEl
+    } = scrollbar;
+    isTouched = true;
+    dragStartPos = e.target === dragEl ? getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] : null;
+    e.preventDefault();
+    e.stopPropagation();
+    wrapperEl.style.transitionDuration = '100ms';
+    dragEl.style.transitionDuration = '100ms';
+    setDragPosition(e);
+    clearTimeout(dragTimeout);
+    el.style.transitionDuration = '0ms';
+    if (params.hide) {
+      el.style.opacity = 1;
+    }
+    if (swiper.params.cssMode) {
+      swiper.wrapperEl.style['scroll-snap-type'] = 'none';
+    }
+    emit('scrollbarDragStart', e);
+  }
+  function onDragMove(e) {
+    const {
+      scrollbar,
+      wrapperEl
+    } = swiper;
+    const {
+      el,
+      dragEl
+    } = scrollbar;
+    if (!isTouched) return;
+    if (e.preventDefault && e.cancelable) e.preventDefault();else e.returnValue = false;
+    setDragPosition(e);
+    wrapperEl.style.transitionDuration = '0ms';
+    el.style.transitionDuration = '0ms';
+    dragEl.style.transitionDuration = '0ms';
+    emit('scrollbarDragMove', e);
+  }
+  function onDragEnd(e) {
+    const params = swiper.params.scrollbar;
+    const {
+      scrollbar,
+      wrapperEl
+    } = swiper;
+    const {
+      el
+    } = scrollbar;
+    if (!isTouched) return;
+    isTouched = false;
+    if (swiper.params.cssMode) {
+      swiper.wrapperEl.style['scroll-snap-type'] = '';
+      wrapperEl.style.transitionDuration = '';
+    }
+    if (params.hide) {
+      clearTimeout(dragTimeout);
+      dragTimeout = nextTick(() => {
+        el.style.opacity = 0;
+        el.style.transitionDuration = '400ms';
+      }, 1000);
+    }
+    emit('scrollbarDragEnd', e);
+    if (params.snapOnRelease) {
+      swiper.slideToClosest();
+    }
+  }
+  function events(method) {
+    const {
+      scrollbar,
+      params
+    } = swiper;
+    const el = scrollbar.el;
+    if (!el) return;
+    const target = el;
+    const activeListener = params.passiveListeners ? {
+      passive: false,
+      capture: false
+    } : false;
+    const passiveListener = params.passiveListeners ? {
+      passive: true,
+      capture: false
+    } : false;
+    if (!target) return;
+    const eventMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
+    target[eventMethod]('pointerdown', onDragStart, activeListener);
+    document[eventMethod]('pointermove', onDragMove, activeListener);
+    document[eventMethod]('pointerup', onDragEnd, passiveListener);
+  }
+  function enableDraggable() {
+    if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
+    events('on');
+  }
+  function disableDraggable() {
+    if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
+    events('off');
+  }
+  function init() {
+    const {
+      scrollbar,
+      el: swiperEl
+    } = swiper;
+    swiper.params.scrollbar = createElementIfNotDefined(swiper, swiper.originalParams.scrollbar, swiper.params.scrollbar, {
+      el: 'swiper-scrollbar'
+    });
+    const params = swiper.params.scrollbar;
+    if (!params.el) return;
+    let el;
+    if (typeof params.el === 'string' && swiper.isElement) {
+      el = swiper.el.querySelector(params.el);
+    }
+    if (!el && typeof params.el === 'string') {
+      el = document.querySelectorAll(params.el);
+      if (!el.length) return;
+    } else if (!el) {
+      el = params.el;
+    }
+    if (swiper.params.uniqueNavElements && typeof params.el === 'string' && el.length > 1 && swiperEl.querySelectorAll(params.el).length === 1) {
+      el = swiperEl.querySelector(params.el);
+    }
+    if (el.length > 0) el = el[0];
+    el.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
+    let dragEl;
+    if (el) {
+      dragEl = el.querySelector(classesToSelector(swiper.params.scrollbar.dragClass));
+      if (!dragEl) {
+        dragEl = createElement('div', swiper.params.scrollbar.dragClass);
+        el.append(dragEl);
+      }
+    }
+    Object.assign(scrollbar, {
+      el,
+      dragEl
+    });
+    if (params.draggable) {
+      enableDraggable();
+    }
+    if (el) {
+      el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
+    }
+  }
+  function destroy() {
+    const params = swiper.params.scrollbar;
+    const el = swiper.scrollbar.el;
+    if (el) {
+      el.classList.remove(...classesToTokens(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass));
+    }
+    disableDraggable();
+  }
+  on('changeDirection', () => {
+    if (!swiper.scrollbar || !swiper.scrollbar.el) return;
+    const params = swiper.params.scrollbar;
+    let {
+      el
+    } = swiper.scrollbar;
+    el = makeElementsArray(el);
+    el.forEach(subEl => {
+      subEl.classList.remove(params.horizontalClass, params.verticalClass);
+      subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
+    });
+  });
+  on('init', () => {
+    if (swiper.params.scrollbar.enabled === false) {
+      // eslint-disable-next-line
+      disable();
+    } else {
+      init();
+      updateSize();
+      setTranslate();
+    }
+  });
+  on('update resize observerUpdate lock unlock changeDirection', () => {
+    updateSize();
+  });
+  on('setTranslate', () => {
+    setTranslate();
+  });
+  on('setTransition', (_s, duration) => {
+    setTransition(duration);
+  });
+  on('enable disable', () => {
+    const {
+      el
+    } = swiper.scrollbar;
+    if (el) {
+      el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
+    }
+  });
+  on('destroy', () => {
+    destroy();
+  });
+  const enable = () => {
+    swiper.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
+    if (swiper.scrollbar.el) {
+      swiper.scrollbar.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
+    }
+    init();
+    updateSize();
+    setTranslate();
+  };
+  const disable = () => {
+    swiper.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
+    if (swiper.scrollbar.el) {
+      swiper.scrollbar.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
+    }
+    destroy();
+  };
+  Object.assign(swiper.scrollbar, {
+    enable,
+    disable,
+    updateSize,
+    setTranslate,
+    init,
+    destroy
+  });
+}
+
+export { Scrollbar as default };

package/modules/scrollbar.scss

@@ -0,0 +1,61 @@
+@at-root {
+  :root {
+    /*
+  --swiper-scrollbar-border-radius: 10px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
+  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
+  --swiper-scrollbar-size: 4px;
+  */
+  }
+}
+.swiper-scrollbar {
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
+  .swiper-scrollbar-disabled > &,
+  &.swiper-scrollbar-disabled {
+    display: none !important;
+  }
+  .swiper-horizontal > &,
+  &.swiper-scrollbar-horizontal {
+    position: absolute;
+    left: var(--swiper-scrollbar-sides-offset, 1%);
+    bottom: var(--swiper-scrollbar-bottom, 4px);
+    top: var(--swiper-scrollbar-top, auto);
+    z-index: 50;
+    height: var(--swiper-scrollbar-size, 4px);
+    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+  }
+  .swiper-vertical > &,
+  &.swiper-scrollbar-vertical {
+    position: absolute;
+    left: var(--swiper-scrollbar-left, auto);
+    right: var(--swiper-scrollbar-right, 4px);
+    top: var(--swiper-scrollbar-sides-offset, 1%);
+    z-index: 50;
+    width: var(--swiper-scrollbar-size, 4px);
+    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+  }
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}

package/modules/thumbs.less

@@ -0,0 +1,5 @@
+.swiper-thumbs {
+  .swiper-slide-thumb-active {
+    // Styles for active thumb slide
+  }
+}

package/modules/thumbs.min.mjs

@@ -0,0 +1,2 @@
+import{g as getDocument}from"../shared/ssr-window.esm.min.mjs";import{o as isObject,e as elementChildren}from"../shared/utils.min.mjs";function Thumb(e){let{swiper:s,extendParams:i,on:t}=e;i({thumbs:{swiper:null,multipleActiveThumbs:!0,autoScrollOffset:0,slideThumbActiveClass:"swiper-slide-thumb-active",thumbsContainerClass:"swiper-thumbs"}});let r=!1,a=!1;function n(){const e=s.thumbs.swiper;if(!e||e.destroyed)return;const i=e.clickedIndex,t=e.clickedSlide;if(t&&t.classList.contains(s.params.thumbs.slideThumbActiveClass))return;if(null==i)return;let r;r=e.params.loop?parseInt(e.clickedSlide.getAttribute("data-swiper-slide-index"),10):i,s.params.loop?s.slideToLoop(r):s.slideTo(r)}function l(){const{thumbs:e}=s.params;if(r)return!1;r=!0;const i=s.constructor;if(e.swiper instanceof i){if(e.swiper.destroyed)return r=!1,!1;s.thumbs.swiper=e.swiper,Object.assign(s.thumbs.swiper.originalParams,{watchSlidesProgress:!0,slideToClickedSlide:!1}),Object.assign(s.thumbs.swiper.params,{watchSlidesProgress:!0,slideToClickedSlide:!1}),s.thumbs.swiper.update()}else if(isObject(e.swiper)){const t=Object.assign({},e.swiper);Object.assign(t,{watchSlidesProgress:!0,slideToClickedSlide:!1}),s.thumbs.swiper=new i(t),a=!0}return s.thumbs.swiper.el.classList.add(s.params.thumbs.thumbsContainerClass),s.thumbs.swiper.on("tap",n),!0}function d(e){const i=s.thumbs.swiper;if(!i||i.destroyed)return;const t="auto"===i.params.slidesPerView?i.slidesPerViewDynamic():i.params.slidesPerView;let r=1;const a=s.params.thumbs.slideThumbActiveClass;if(s.params.slidesPerView>1&&!s.params.centeredSlides&&(r=s.params.slidesPerView),s.params.thumbs.multipleActiveThumbs||(r=1),r=Math.floor(r),i.slides.forEach((e=>e.classList.remove(a))),i.params.loop||i.params.virtual&&i.params.virtual.enabled)for(let e=0;e<r;e+=1)elementChildren(i.slidesEl,`[data-swiper-slide-index="${s.realIndex+e}"]`).forEach((e=>{e.classList.add(a)}));else for(let e=0;e<r;e+=1)i.slides[s.realIndex+e]&&i.slides[s.realIndex+e].classList.add(a);const n=s.params.thumbs.autoScrollOffset,l=n&&!i.params.loop;if(s.realIndex!==i.realIndex||l){const r=i.activeIndex;let a,d;if(i.params.loop){const e=i.slides.find((e=>e.getAttribute("data-swiper-slide-index")===`${s.realIndex}`));a=i.slides.indexOf(e),d=s.activeIndex>s.previousIndex?"next":"prev"}else a=s.realIndex,d=a>s.previousIndex?"next":"prev";l&&(a+="next"===d?n:-1*n),i.visibleSlidesIndexes&&i.visibleSlidesIndexes.indexOf(a)<0&&(i.params.centeredSlides?a=a>r?a-Math.floor(t/2)+1:a+Math.floor(t/2)-1:a>r&&i.params.slidesPerGroup,i.slideTo(a,e?0:void 0))}}s.thumbs={swiper:null},t("beforeInit",(()=>{const{thumbs:e}=s.params;if(e&&e.swiper)if("string"==typeof e.swiper||e.swiper instanceof HTMLElement){const i=getDocument(),t=()=>{const t="string"==typeof e.swiper?i.querySelector(e.swiper):e.swiper;if(t&&t.swiper)e.swiper=t.swiper,l(),d(!0);else if(t){const i=`${s.params.eventsPrefix}init`,r=a=>{e.swiper=a.detail[0],t.removeEventListener(i,r),l(),d(!0),e.swiper.update(),s.update()};t.addEventListener(i,r)}return t},r=()=>{if(s.destroyed)return;t()||requestAnimationFrame(r)};requestAnimationFrame(r)}else l(),d(!0)})),t("slideChange update resize observerUpdate",(()=>{d()})),t("setTransition",((e,i)=>{const t=s.thumbs.swiper;t&&!t.destroyed&&t.setTransition(i)})),t("beforeDestroy",(()=>{const e=s.thumbs.swiper;e&&!e.destroyed&&a&&e.destroy()})),Object.assign(s.thumbs,{init:l,update:d})}export{Thumb as default};
+//# sourceMappingURL=thumbs.min.mjs.map

package/modules/thumbs.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbs.mjs.mjs","names":["getDocument","isObject","elementChildren","Thumb","_ref","swiper","extendParams","on","thumbs","multipleActiveThumbs","autoScrollOffset","slideThumbActiveClass","thumbsContainerClass","initialized","swiperCreated","onThumbClick","thumbsSwiper","destroyed","clickedIndex","clickedSlide","classList","contains","params","slideToIndex","loop","parseInt","getAttribute","slideToLoop","slideTo","init","thumbsParams","SwiperClass","constructor","Object","assign","originalParams","watchSlidesProgress","slideToClickedSlide","update","thumbsSwiperParams","el","add","initial","slidesPerView","slidesPerViewDynamic","thumbsToActivate","thumbActiveClass","centeredSlides","Math","floor","slides","forEach","slideEl","remove","virtual","enabled","i","slidesEl","realIndex","useOffset","currentThumbsIndex","activeIndex","newThumbsIndex","direction","newThumbsSlide","find","indexOf","previousIndex","visibleSlidesIndexes","slidesPerGroup","undefined","HTMLElement","document","getThumbsElementAndInit","thumbsElement","querySelector","eventName","eventsPrefix","onThumbsSwiper","e","detail","removeEventListener","addEventListener","watchForThumbsToAppear","requestAnimationFrame","_s","duration","setTransition","destroy"],"sources":["0"],"mappings":"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"}

package/modules/thumbs.mjs

@@ -0,0 +1,197 @@
+import { g as getDocument } from '../shared/ssr-window.esm.mjs';
+import { o as isObject, e as elementChildren } from '../shared/utils.mjs';
+
+function Thumb(_ref) {
+  let {
+    swiper,
+    extendParams,
+    on
+  } = _ref;
+  extendParams({
+    thumbs: {
+      swiper: null,
+      multipleActiveThumbs: true,
+      autoScrollOffset: 0,
+      slideThumbActiveClass: 'swiper-slide-thumb-active',
+      thumbsContainerClass: 'swiper-thumbs'
+    }
+  });
+  let initialized = false;
+  let swiperCreated = false;
+  swiper.thumbs = {
+    swiper: null
+  };
+  function onThumbClick() {
+    const thumbsSwiper = swiper.thumbs.swiper;
+    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
+    const clickedIndex = thumbsSwiper.clickedIndex;
+    const clickedSlide = thumbsSwiper.clickedSlide;
+    if (clickedSlide && clickedSlide.classList.contains(swiper.params.thumbs.slideThumbActiveClass)) return;
+    if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
+    let slideToIndex;
+    if (thumbsSwiper.params.loop) {
+      slideToIndex = parseInt(thumbsSwiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
+    } else {
+      slideToIndex = clickedIndex;
+    }
+    if (swiper.params.loop) {
+      swiper.slideToLoop(slideToIndex);
+    } else {
+      swiper.slideTo(slideToIndex);
+    }
+  }
+  function init() {
+    const {
+      thumbs: thumbsParams
+    } = swiper.params;
+    if (initialized) return false;
+    initialized = true;
+    const SwiperClass = swiper.constructor;
+    if (thumbsParams.swiper instanceof SwiperClass) {
+      if (thumbsParams.swiper.destroyed) {
+        initialized = false;
+        return false;
+      }
+      swiper.thumbs.swiper = thumbsParams.swiper;
+      Object.assign(swiper.thumbs.swiper.originalParams, {
+        watchSlidesProgress: true,
+        slideToClickedSlide: false
+      });
+      Object.assign(swiper.thumbs.swiper.params, {
+        watchSlidesProgress: true,
+        slideToClickedSlide: false
+      });
+      swiper.thumbs.swiper.update();
+    } else if (isObject(thumbsParams.swiper)) {
+      const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
+      Object.assign(thumbsSwiperParams, {
+        watchSlidesProgress: true,
+        slideToClickedSlide: false
+      });
+      swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
+      swiperCreated = true;
+    }
+    swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);
+    swiper.thumbs.swiper.on('tap', onThumbClick);
+    return true;
+  }
+  function update(initial) {
+    const thumbsSwiper = swiper.thumbs.swiper;
+    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
+    const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
+
+    // Activate thumbs
+    let thumbsToActivate = 1;
+    const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
+    if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
+      thumbsToActivate = swiper.params.slidesPerView;
+    }
+    if (!swiper.params.thumbs.multipleActiveThumbs) {
+      thumbsToActivate = 1;
+    }
+    thumbsToActivate = Math.floor(thumbsToActivate);
+    thumbsSwiper.slides.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));
+    if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
+      for (let i = 0; i < thumbsToActivate; i += 1) {
+        elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index="${swiper.realIndex + i}"]`).forEach(slideEl => {
+          slideEl.classList.add(thumbActiveClass);
+        });
+      }
+    } else {
+      for (let i = 0; i < thumbsToActivate; i += 1) {
+        if (thumbsSwiper.slides[swiper.realIndex + i]) {
+          thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);
+        }
+      }
+    }
+    const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
+    const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
+    if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
+      const currentThumbsIndex = thumbsSwiper.activeIndex;
+      let newThumbsIndex;
+      let direction;
+      if (thumbsSwiper.params.loop) {
+        const newThumbsSlide = thumbsSwiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`);
+        newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
+        direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
+      } else {
+        newThumbsIndex = swiper.realIndex;
+        direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
+      }
+      if (useOffset) {
+        newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
+      }
+      if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
+        if (thumbsSwiper.params.centeredSlides) {
+          if (newThumbsIndex > currentThumbsIndex) {
+            newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
+          } else {
+            newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
+          }
+        } else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) ;
+        thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
+      }
+    }
+  }
+  on('beforeInit', () => {
+    const {
+      thumbs
+    } = swiper.params;
+    if (!thumbs || !thumbs.swiper) return;
+    if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {
+      const document = getDocument();
+      const getThumbsElementAndInit = () => {
+        const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;
+        if (thumbsElement && thumbsElement.swiper) {
+          thumbs.swiper = thumbsElement.swiper;
+          init();
+          update(true);
+        } else if (thumbsElement) {
+          const eventName = `${swiper.params.eventsPrefix}init`;
+          const onThumbsSwiper = e => {
+            thumbs.swiper = e.detail[0];
+            thumbsElement.removeEventListener(eventName, onThumbsSwiper);
+            init();
+            update(true);
+            thumbs.swiper.update();
+            swiper.update();
+          };
+          thumbsElement.addEventListener(eventName, onThumbsSwiper);
+        }
+        return thumbsElement;
+      };
+      const watchForThumbsToAppear = () => {
+        if (swiper.destroyed) return;
+        const thumbsElement = getThumbsElementAndInit();
+        if (!thumbsElement) {
+          requestAnimationFrame(watchForThumbsToAppear);
+        }
+      };
+      requestAnimationFrame(watchForThumbsToAppear);
+    } else {
+      init();
+      update(true);
+    }
+  });
+  on('slideChange update resize observerUpdate', () => {
+    update();
+  });
+  on('setTransition', (_s, duration) => {
+    const thumbsSwiper = swiper.thumbs.swiper;
+    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
+    thumbsSwiper.setTransition(duration);
+  });
+  on('beforeDestroy', () => {
+    const thumbsSwiper = swiper.thumbs.swiper;
+    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
+    if (swiperCreated) {
+      thumbsSwiper.destroy();
+    }
+  });
+  Object.assign(swiper.thumbs, {
+    init,
+    update
+  });
+}
+
+export { Thumb as default };

package/modules/thumbs.scss

@@ -0,0 +1,5 @@
+.swiper-thumbs {
+  .swiper-slide-thumb-active {
+    // Styles for active thumb slide
+  }
+}

package/modules/virtual-element.css

@@ -0,0 +1,19 @@
+.swiper-virtual ::slotted(swiper-slide) {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+  height: 1px;
+  width: var(--swiper-virtual-size);
+}
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+  width: 1px;
+  height: var(--swiper-virtual-size);
+}

package/modules/virtual-element.min.css

@@ -0,0 +1 @@
+.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}