@salla.sa/twilight-components 2.9.49 → 2.10.1

package/dist/components/salla-slider2.js

@@ -2,1721 +2,9 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getDocument, $, a as getWindow, n as nextTick, i as isObject, S as Swiper } from './core.js';
 import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
 import { d as defineCustomElement$1 } from './salla-button2.js';
 
-function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
-  const document = getDocument();
-
-  if (swiper.params.createElements) {
-    Object.keys(checkProps).forEach(key => {
-      if (!params[key] && params.auto === true) {
-        let element = swiper.$el.children(`.${checkProps[key]}`)[0];
-
-        if (!element) {
-          element = document.createElement('div');
-          element.className = checkProps[key];
-          swiper.$el.append(element);
-        }
-
-        params[key] = element;
-        originalParams[key] = element;
-      }
-    });
-  }
-
-  return params;
-}
-
-function Navigation(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  extendParams({
-    navigation: {
-      nextEl: null,
-      prevEl: null,
-      hideOnClick: false,
-      disabledClass: 'swiper-button-disabled',
-      hiddenClass: 'swiper-button-hidden',
-      lockClass: 'swiper-button-lock',
-      navigationDisabledClass: 'swiper-navigation-disabled'
-    }
-  });
-  swiper.navigation = {
-    nextEl: null,
-    $nextEl: null,
-    prevEl: null,
-    $prevEl: null
-  };
-
-  function getEl(el) {
-    let $el;
-
-    if (el) {
-      $el = $(el);
-
-      if (swiper.params.uniqueNavElements && typeof el === 'string' && $el.length > 1 && swiper.$el.find(el).length === 1) {
-        $el = swiper.$el.find(el);
-      }
-    }
-
-    return $el;
-  }
-
-  function toggleEl($el, disabled) {
-    const params = swiper.params.navigation;
-
-    if ($el && $el.length > 0) {
-      $el[disabled ? 'addClass' : 'removeClass'](params.disabledClass);
-      if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
-
-      if (swiper.params.watchOverflow && swiper.enabled) {
-        $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
-      }
-    }
-  }
-
-  function update() {
-    // Update Navigation Buttons
-    if (swiper.params.loop) return;
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-    toggleEl($prevEl, swiper.isBeginning && !swiper.params.rewind);
-    toggleEl($nextEl, swiper.isEnd && !swiper.params.rewind);
-  }
-
-  function onPrevClick(e) {
-    e.preventDefault();
-    if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
-    swiper.slidePrev();
-    emit('navigationPrev');
-  }
-
-  function onNextClick(e) {
-    e.preventDefault();
-    if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
-    swiper.slideNext();
-    emit('navigationNext');
-  }
-
-  function init() {
-    const params = swiper.params.navigation;
-    swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
-      nextEl: 'swiper-button-next',
-      prevEl: 'swiper-button-prev'
-    });
-    if (!(params.nextEl || params.prevEl)) return;
-    const $nextEl = getEl(params.nextEl);
-    const $prevEl = getEl(params.prevEl);
-
-    if ($nextEl && $nextEl.length > 0) {
-      $nextEl.on('click', onNextClick);
-    }
-
-    if ($prevEl && $prevEl.length > 0) {
-      $prevEl.on('click', onPrevClick);
-    }
-
-    Object.assign(swiper.navigation, {
-      $nextEl,
-      nextEl: $nextEl && $nextEl[0],
-      $prevEl,
-      prevEl: $prevEl && $prevEl[0]
-    });
-
-    if (!swiper.enabled) {
-      if ($nextEl) $nextEl.addClass(params.lockClass);
-      if ($prevEl) $prevEl.addClass(params.lockClass);
-    }
-  }
-
-  function destroy() {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-
-    if ($nextEl && $nextEl.length) {
-      $nextEl.off('click', onNextClick);
-      $nextEl.removeClass(swiper.params.navigation.disabledClass);
-    }
-
-    if ($prevEl && $prevEl.length) {
-      $prevEl.off('click', onPrevClick);
-      $prevEl.removeClass(swiper.params.navigation.disabledClass);
-    }
-  }
-
-  on('init', () => {
-    if (swiper.params.navigation.enabled === false) {
-      // eslint-disable-next-line
-      disable();
-    } else {
-      init();
-      update();
-    }
-  });
-  on('toEdge fromEdge lock unlock', () => {
-    update();
-  });
-  on('destroy', () => {
-    destroy();
-  });
-  on('enable disable', () => {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-
-    if ($nextEl) {
-      $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
-    }
-
-    if ($prevEl) {
-      $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
-    }
-  });
-  on('click', (_s, e) => {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-    const targetEl = e.target;
-
-    if (swiper.params.navigation.hideOnClick && !$(targetEl).is($prevEl) && !$(targetEl).is($nextEl)) {
-      if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
-      let isHidden;
-
-      if ($nextEl) {
-        isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
-      } else if ($prevEl) {
-        isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
-      }
-
-      if (isHidden === true) {
-        emit('navigationShow');
-      } else {
-        emit('navigationHide');
-      }
-
-      if ($nextEl) {
-        $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
-      }
-
-      if ($prevEl) {
-        $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
-      }
-    }
-  });
-
-  const enable = () => {
-    swiper.$el.removeClass(swiper.params.navigation.navigationDisabledClass);
-    init();
-    update();
-  };
-
-  const disable = () => {
-    swiper.$el.addClass(swiper.params.navigation.navigationDisabledClass);
-    destroy();
-  };
-
-  Object.assign(swiper.navigation, {
-    enable,
-    disable,
-    update,
-    init,
-    destroy
-  });
-}
-
-function classesToSelector(classes) {
-  if (classes === void 0) {
-    classes = '';
-  }
-
-  return `.${classes.trim().replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
-  .replace(/ /g, '.')}`;
-}
-
-function Pagination(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  const pfx = 'swiper-pagination';
-  extendParams({
-    pagination: {
-      el: null,
-      bulletElement: 'span',
-      clickable: false,
-      hideOnClick: false,
-      renderBullet: null,
-      renderProgressbar: null,
-      renderFraction: null,
-      renderCustom: null,
-      progressbarOpposite: false,
-      type: 'bullets',
-      // 'bullets' or 'progressbar' or 'fraction' or 'custom'
-      dynamicBullets: false,
-      dynamicMainBullets: 1,
-      formatFractionCurrent: number => number,
-      formatFractionTotal: number => number,
-      bulletClass: `${pfx}-bullet`,
-      bulletActiveClass: `${pfx}-bullet-active`,
-      modifierClass: `${pfx}-`,
-      currentClass: `${pfx}-current`,
-      totalClass: `${pfx}-total`,
-      hiddenClass: `${pfx}-hidden`,
-      progressbarFillClass: `${pfx}-progressbar-fill`,
-      progressbarOppositeClass: `${pfx}-progressbar-opposite`,
-      clickableClass: `${pfx}-clickable`,
-      lockClass: `${pfx}-lock`,
-      horizontalClass: `${pfx}-horizontal`,
-      verticalClass: `${pfx}-vertical`,
-      paginationDisabledClass: `${pfx}-disabled`
-    }
-  });
-  swiper.pagination = {
-    el: null,
-    $el: null,
-    bullets: []
-  };
-  let bulletSize;
-  let dynamicBulletIndex = 0;
-
-  function isPaginationDisabled() {
-    return !swiper.params.pagination.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0;
-  }
-
-  function setSideBullets($bulletEl, position) {
-    const {
-      bulletActiveClass
-    } = swiper.params.pagination;
-    $bulletEl[position]().addClass(`${bulletActiveClass}-${position}`)[position]().addClass(`${bulletActiveClass}-${position}-${position}`);
-  }
-
-  function update() {
-    // Render || Update Pagination bullets/items
-    const rtl = swiper.rtl;
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
-    const $el = swiper.pagination.$el; // Current/Total
-
-    let current;
-    const total = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
-
-    if (swiper.params.loop) {
-      current = Math.ceil((swiper.activeIndex - swiper.loopedSlides) / swiper.params.slidesPerGroup);
-
-      if (current > slidesLength - 1 - swiper.loopedSlides * 2) {
-        current -= slidesLength - swiper.loopedSlides * 2;
-      }
-
-      if (current > total - 1) current -= total;
-      if (current < 0 && swiper.params.paginationType !== 'bullets') current = total + current;
-    } else if (typeof swiper.snapIndex !== 'undefined') {
-      current = swiper.snapIndex;
-    } else {
-      current = swiper.activeIndex || 0;
-    } // Types
-
-
-    if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {
-      const bullets = swiper.pagination.bullets;
-      let firstIndex;
-      let lastIndex;
-      let midIndex;
-
-      if (params.dynamicBullets) {
-        bulletSize = bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true);
-        $el.css(swiper.isHorizontal() ? 'width' : 'height', `${bulletSize * (params.dynamicMainBullets + 4)}px`);
-
-        if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
-          dynamicBulletIndex += current - (swiper.previousIndex - swiper.loopedSlides || 0);
-
-          if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
-            dynamicBulletIndex = params.dynamicMainBullets - 1;
-          } else if (dynamicBulletIndex < 0) {
-            dynamicBulletIndex = 0;
-          }
-        }
-
-        firstIndex = Math.max(current - dynamicBulletIndex, 0);
-        lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
-        midIndex = (lastIndex + firstIndex) / 2;
-      }
-
-      bullets.removeClass(['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(suffix => `${params.bulletActiveClass}${suffix}`).join(' '));
-
-      if ($el.length > 1) {
-        bullets.each(bullet => {
-          const $bullet = $(bullet);
-          const bulletIndex = $bullet.index();
-
-          if (bulletIndex === current) {
-            $bullet.addClass(params.bulletActiveClass);
-          }
-
-          if (params.dynamicBullets) {
-            if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
-              $bullet.addClass(`${params.bulletActiveClass}-main`);
-            }
-
-            if (bulletIndex === firstIndex) {
-              setSideBullets($bullet, 'prev');
-            }
-
-            if (bulletIndex === lastIndex) {
-              setSideBullets($bullet, 'next');
-            }
-          }
-        });
-      } else {
-        const $bullet = bullets.eq(current);
-        const bulletIndex = $bullet.index();
-        $bullet.addClass(params.bulletActiveClass);
-
-        if (params.dynamicBullets) {
-          const $firstDisplayedBullet = bullets.eq(firstIndex);
-          const $lastDisplayedBullet = bullets.eq(lastIndex);
-
-          for (let i = firstIndex; i <= lastIndex; i += 1) {
-            bullets.eq(i).addClass(`${params.bulletActiveClass}-main`);
-          }
-
-          if (swiper.params.loop) {
-            if (bulletIndex >= bullets.length) {
-              for (let i = params.dynamicMainBullets; i >= 0; i -= 1) {
-                bullets.eq(bullets.length - i).addClass(`${params.bulletActiveClass}-main`);
-              }
-
-              bullets.eq(bullets.length - params.dynamicMainBullets - 1).addClass(`${params.bulletActiveClass}-prev`);
-            } else {
-              setSideBullets($firstDisplayedBullet, 'prev');
-              setSideBullets($lastDisplayedBullet, 'next');
-            }
-          } else {
-            setSideBullets($firstDisplayedBullet, 'prev');
-            setSideBullets($lastDisplayedBullet, 'next');
-          }
-        }
-      }
-
-      if (params.dynamicBullets) {
-        const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
-        const bulletsOffset = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
-        const offsetProp = rtl ? 'right' : 'left';
-        bullets.css(swiper.isHorizontal() ? offsetProp : 'top', `${bulletsOffset}px`);
-      }
-    }
-
-    if (params.type === 'fraction') {
-      $el.find(classesToSelector(params.currentClass)).text(params.formatFractionCurrent(current + 1));
-      $el.find(classesToSelector(params.totalClass)).text(params.formatFractionTotal(total));
-    }
-
-    if (params.type === 'progressbar') {
-      let progressbarDirection;
-
-      if (params.progressbarOpposite) {
-        progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
-      } else {
-        progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
-      }
-
-      const scale = (current + 1) / total;
-      let scaleX = 1;
-      let scaleY = 1;
-
-      if (progressbarDirection === 'horizontal') {
-        scaleX = scale;
-      } else {
-        scaleY = scale;
-      }
-
-      $el.find(classesToSelector(params.progressbarFillClass)).transform(`translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`).transition(swiper.params.speed);
-    }
-
-    if (params.type === 'custom' && params.renderCustom) {
-      $el.html(params.renderCustom(swiper, current + 1, total));
-      emit('paginationRender', $el[0]);
-    } else {
-      emit('paginationUpdate', $el[0]);
-    }
-
-    if (swiper.params.watchOverflow && swiper.enabled) {
-      $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
-    }
-  }
-
-  function render() {
-    // Render Container
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
-    const $el = swiper.pagination.$el;
-    let paginationHTML = '';
-
-    if (params.type === 'bullets') {
-      let numberOfBullets = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
-
-      if (swiper.params.freeMode && swiper.params.freeMode.enabled && !swiper.params.loop && numberOfBullets > slidesLength) {
-        numberOfBullets = slidesLength;
-      }
-
-      for (let i = 0; i < numberOfBullets; i += 1) {
-        if (params.renderBullet) {
-          paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
-        } else {
-          paginationHTML += `<${params.bulletElement} class="${params.bulletClass}"></${params.bulletElement}>`;
-        }
-      }
-
-      $el.html(paginationHTML);
-      swiper.pagination.bullets = $el.find(classesToSelector(params.bulletClass));
-    }
-
-    if (params.type === 'fraction') {
-      if (params.renderFraction) {
-        paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
-      } else {
-        paginationHTML = `<span class="${params.currentClass}"></span>` + ' / ' + `<span class="${params.totalClass}"></span>`;
-      }
-
-      $el.html(paginationHTML);
-    }
-
-    if (params.type === 'progressbar') {
-      if (params.renderProgressbar) {
-        paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
-      } else {
-        paginationHTML = `<span class="${params.progressbarFillClass}"></span>`;
-      }
-
-      $el.html(paginationHTML);
-    }
-
-    if (params.type !== 'custom') {
-      emit('paginationRender', swiper.pagination.$el[0]);
-    }
-  }
-
-  function init() {
-    swiper.params.pagination = createElementIfNotDefined(swiper, swiper.originalParams.pagination, swiper.params.pagination, {
-      el: 'swiper-pagination'
-    });
-    const params = swiper.params.pagination;
-    if (!params.el) return;
-    let $el = $(params.el);
-    if ($el.length === 0) return;
-
-    if (swiper.params.uniqueNavElements && typeof params.el === 'string' && $el.length > 1) {
-      $el = swiper.$el.find(params.el); // check if it belongs to another nested Swiper
-
-      if ($el.length > 1) {
-        $el = $el.filter(el => {
-          if ($(el).parents('.swiper')[0] !== swiper.el) return false;
-          return true;
-        });
-      }
-    }
-
-    if (params.type === 'bullets' && params.clickable) {
-      $el.addClass(params.clickableClass);
-    }
-
-    $el.addClass(params.modifierClass + params.type);
-    $el.addClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
-
-    if (params.type === 'bullets' && params.dynamicBullets) {
-      $el.addClass(`${params.modifierClass}${params.type}-dynamic`);
-      dynamicBulletIndex = 0;
-
-      if (params.dynamicMainBullets < 1) {
-        params.dynamicMainBullets = 1;
-      }
-    }
-
-    if (params.type === 'progressbar' && params.progressbarOpposite) {
-      $el.addClass(params.progressbarOppositeClass);
-    }
-
-    if (params.clickable) {
-      $el.on('click', classesToSelector(params.bulletClass), function onClick(e) {
-        e.preventDefault();
-        let index = $(this).index() * swiper.params.slidesPerGroup;
-        if (swiper.params.loop) index += swiper.loopedSlides;
-        swiper.slideTo(index);
-      });
-    }
-
-    Object.assign(swiper.pagination, {
-      $el,
-      el: $el[0]
-    });
-
-    if (!swiper.enabled) {
-      $el.addClass(params.lockClass);
-    }
-  }
-
-  function destroy() {
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const $el = swiper.pagination.$el;
-    $el.removeClass(params.hiddenClass);
-    $el.removeClass(params.modifierClass + params.type);
-    $el.removeClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
-    if (swiper.pagination.bullets && swiper.pagination.bullets.removeClass) swiper.pagination.bullets.removeClass(params.bulletActiveClass);
-
-    if (params.clickable) {
-      $el.off('click', classesToSelector(params.bulletClass));
-    }
-  }
-
-  on('init', () => {
-    if (swiper.params.pagination.enabled === false) {
-      // eslint-disable-next-line
-      disable();
-    } else {
-      init();
-      render();
-      update();
-    }
-  });
-  on('activeIndexChange', () => {
-    if (swiper.params.loop) {
-      update();
-    } else if (typeof swiper.snapIndex === 'undefined') {
-      update();
-    }
-  });
-  on('snapIndexChange', () => {
-    if (!swiper.params.loop) {
-      update();
-    }
-  });
-  on('slidesLengthChange', () => {
-    if (swiper.params.loop) {
-      render();
-      update();
-    }
-  });
-  on('snapGridLengthChange', () => {
-    if (!swiper.params.loop) {
-      render();
-      update();
-    }
-  });
-  on('destroy', () => {
-    destroy();
-  });
-  on('enable disable', () => {
-    const {
-      $el
-    } = swiper.pagination;
-
-    if ($el) {
-      $el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.pagination.lockClass);
-    }
-  });
-  on('lock unlock', () => {
-    update();
-  });
-  on('click', (_s, e) => {
-    const targetEl = e.target;
-    const {
-      $el
-    } = swiper.pagination;
-
-    if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && $el && $el.length > 0 && !$(targetEl).hasClass(swiper.params.pagination.bulletClass)) {
-      if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;
-      const isHidden = $el.hasClass(swiper.params.pagination.hiddenClass);
-
-      if (isHidden === true) {
-        emit('paginationShow');
-      } else {
-        emit('paginationHide');
-      }
-
-      $el.toggleClass(swiper.params.pagination.hiddenClass);
-    }
-  });
-
-  const enable = () => {
-    swiper.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
-
-    if (swiper.pagination.$el) {
-      swiper.pagination.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
-    }
-
-    init();
-    render();
-    update();
-  };
-
-  const disable = () => {
-    swiper.$el.addClass(swiper.params.pagination.paginationDisabledClass);
-
-    if (swiper.pagination.$el) {
-      swiper.pagination.$el.addClass(swiper.params.pagination.paginationDisabledClass);
-    }
-
-    destroy();
-  };
-
-  Object.assign(swiper.pagination, {
-    enable,
-    disable,
-    render,
-    update,
-    init,
-    destroy
-  });
-}
-
-function Parallax(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on
-  } = _ref;
-  extendParams({
-    parallax: {
-      enabled: false
-    }
-  });
-
-  const setTransform = (el, progress) => {
-    const {
-      rtl
-    } = swiper;
-    const $el = $(el);
-    const rtlFactor = rtl ? -1 : 1;
-    const p = $el.attr('data-swiper-parallax') || '0';
-    let x = $el.attr('data-swiper-parallax-x');
-    let y = $el.attr('data-swiper-parallax-y');
-    const scale = $el.attr('data-swiper-parallax-scale');
-    const opacity = $el.attr('data-swiper-parallax-opacity');
-
-    if (x || y) {
-      x = x || '0';
-      y = y || '0';
-    } else if (swiper.isHorizontal()) {
-      x = p;
-      y = '0';
-    } else {
-      y = p;
-      x = '0';
-    }
-
-    if (x.indexOf('%') >= 0) {
-      x = `${parseInt(x, 10) * progress * rtlFactor}%`;
-    } else {
-      x = `${x * progress * rtlFactor}px`;
-    }
-
-    if (y.indexOf('%') >= 0) {
-      y = `${parseInt(y, 10) * progress}%`;
-    } else {
-      y = `${y * progress}px`;
-    }
-
-    if (typeof opacity !== 'undefined' && opacity !== null) {
-      const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
-      $el[0].style.opacity = currentOpacity;
-    }
-
-    if (typeof scale === 'undefined' || scale === null) {
-      $el.transform(`translate3d(${x}, ${y}, 0px)`);
-    } else {
-      const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
-      $el.transform(`translate3d(${x}, ${y}, 0px) scale(${currentScale})`);
-    }
-  };
-
-  const setTranslate = () => {
-    const {
-      $el,
-      slides,
-      progress,
-      snapGrid
-    } = swiper;
-    $el.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
-      setTransform(el, progress);
-    });
-    slides.each((slideEl, slideIndex) => {
-      let slideProgress = slideEl.progress;
-
-      if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
-        slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
-      }
-
-      slideProgress = Math.min(Math.max(slideProgress, -1), 1);
-      $(slideEl).find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
-        setTransform(el, slideProgress);
-      });
-    });
-  };
-
-  const setTransition = function (duration) {
-    if (duration === void 0) {
-      duration = swiper.params.speed;
-    }
-
-    const {
-      $el
-    } = swiper;
-    $el.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(parallaxEl => {
-      const $parallaxEl = $(parallaxEl);
-      let parallaxDuration = parseInt($parallaxEl.attr('data-swiper-parallax-duration'), 10) || duration;
-      if (duration === 0) parallaxDuration = 0;
-      $parallaxEl.transition(parallaxDuration);
-    });
-  };
-
-  on('beforeInit', () => {
-    if (!swiper.params.parallax.enabled) return;
-    swiper.params.watchSlidesProgress = true;
-    swiper.originalParams.watchSlidesProgress = true;
-  });
-  on('init', () => {
-    if (!swiper.params.parallax.enabled) return;
-    setTranslate();
-  });
-  on('setTranslate', () => {
-    if (!swiper.params.parallax.enabled) return;
-    setTranslate();
-  });
-  on('setTransition', (_swiper, duration) => {
-    if (!swiper.params.parallax.enabled) return;
-    setTransition(duration);
-  });
-}
-
-function Lazy(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  extendParams({
-    lazy: {
-      checkInView: false,
-      enabled: false,
-      loadPrevNext: false,
-      loadPrevNextAmount: 1,
-      loadOnTransitionStart: false,
-      scrollingElement: '',
-      elementClass: 'swiper-lazy',
-      loadingClass: 'swiper-lazy-loading',
-      loadedClass: 'swiper-lazy-loaded',
-      preloaderClass: 'swiper-lazy-preloader'
-    }
-  });
-  swiper.lazy = {};
-  let scrollHandlerAttached = false;
-  let initialImageLoaded = false;
-
-  function loadInSlide(index, loadInDuplicate) {
-    if (loadInDuplicate === void 0) {
-      loadInDuplicate = true;
-    }
-
-    const params = swiper.params.lazy;
-    if (typeof index === 'undefined') return;
-    if (swiper.slides.length === 0) return;
-    const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
-    const $slideEl = isVirtual ? swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-swiper-slide-index="${index}"]`) : swiper.slides.eq(index);
-    const $images = $slideEl.find(`.${params.elementClass}:not(.${params.loadedClass}):not(.${params.loadingClass})`);
-
-    if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {
-      $images.push($slideEl[0]);
-    }
-
-    if ($images.length === 0) return;
-    $images.each(imageEl => {
-      const $imageEl = $(imageEl);
-      $imageEl.addClass(params.loadingClass);
-      const background = $imageEl.attr('data-background');
-      const src = $imageEl.attr('data-src');
-      const srcset = $imageEl.attr('data-srcset');
-      const sizes = $imageEl.attr('data-sizes');
-      const $pictureEl = $imageEl.parent('picture');
-      swiper.loadImage($imageEl[0], src || background, srcset, sizes, false, () => {
-        if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper && !swiper.params || swiper.destroyed) return;
-
-        if (background) {
-          $imageEl.css('background-image', `url("${background}")`);
-          $imageEl.removeAttr('data-background');
-        } else {
-          if (srcset) {
-            $imageEl.attr('srcset', srcset);
-            $imageEl.removeAttr('data-srcset');
-          }
-
-          if (sizes) {
-            $imageEl.attr('sizes', sizes);
-            $imageEl.removeAttr('data-sizes');
-          }
-
-          if ($pictureEl.length) {
-            $pictureEl.children('source').each(sourceEl => {
-              const $source = $(sourceEl);
-
-              if ($source.attr('data-srcset')) {
-                $source.attr('srcset', $source.attr('data-srcset'));
-                $source.removeAttr('data-srcset');
-              }
-            });
-          }
-
-          if (src) {
-            $imageEl.attr('src', src);
-            $imageEl.removeAttr('data-src');
-          }
-        }
-
-        $imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);
-        $slideEl.find(`.${params.preloaderClass}`).remove();
-
-        if (swiper.params.loop && loadInDuplicate) {
-          const slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');
-
-          if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {
-            const originalSlide = swiper.$wrapperEl.children(`[data-swiper-slide-index="${slideOriginalIndex}"]:not(.${swiper.params.slideDuplicateClass})`);
-            loadInSlide(originalSlide.index(), false);
-          } else {
-            const duplicatedSlide = swiper.$wrapperEl.children(`.${swiper.params.slideDuplicateClass}[data-swiper-slide-index="${slideOriginalIndex}"]`);
-            loadInSlide(duplicatedSlide.index(), false);
-          }
-        }
-
-        emit('lazyImageReady', $slideEl[0], $imageEl[0]);
-
-        if (swiper.params.autoHeight) {
-          swiper.updateAutoHeight();
-        }
-      });
-      emit('lazyImageLoad', $slideEl[0], $imageEl[0]);
-    });
-  }
-
-  function load() {
-    const {
-      $wrapperEl,
-      params: swiperParams,
-      slides,
-      activeIndex
-    } = swiper;
-    const isVirtual = swiper.virtual && swiperParams.virtual.enabled;
-    const params = swiperParams.lazy;
-    let slidesPerView = swiperParams.slidesPerView;
-
-    if (slidesPerView === 'auto') {
-      slidesPerView = 0;
-    }
-
-    function slideExist(index) {
-      if (isVirtual) {
-        if ($wrapperEl.children(`.${swiperParams.slideClass}[data-swiper-slide-index="${index}"]`).length) {
-          return true;
-        }
-      } else if (slides[index]) return true;
-
-      return false;
-    }
-
-    function slideIndex(slideEl) {
-      if (isVirtual) {
-        return $(slideEl).attr('data-swiper-slide-index');
-      }
-
-      return $(slideEl).index();
-    }
-
-    if (!initialImageLoaded) initialImageLoaded = true;
-
-    if (swiper.params.watchSlidesProgress) {
-      $wrapperEl.children(`.${swiperParams.slideVisibleClass}`).each(slideEl => {
-        const index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index();
-        loadInSlide(index);
-      });
-    } else if (slidesPerView > 1) {
-      for (let i = activeIndex; i < activeIndex + slidesPerView; i += 1) {
-        if (slideExist(i)) loadInSlide(i);
-      }
-    } else {
-      loadInSlide(activeIndex);
-    }
-
-    if (params.loadPrevNext) {
-      if (slidesPerView > 1 || params.loadPrevNextAmount && params.loadPrevNextAmount > 1) {
-        const amount = params.loadPrevNextAmount;
-        const spv = Math.ceil(slidesPerView);
-        const maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
-        const minIndex = Math.max(activeIndex - Math.max(spv, amount), 0); // Next Slides
-
-        for (let i = activeIndex + spv; i < maxIndex; i += 1) {
-          if (slideExist(i)) loadInSlide(i);
-        } // Prev Slides
-
-
-        for (let i = minIndex; i < activeIndex; i += 1) {
-          if (slideExist(i)) loadInSlide(i);
-        }
-      } else {
-        const nextSlide = $wrapperEl.children(`.${swiperParams.slideNextClass}`);
-        if (nextSlide.length > 0) loadInSlide(slideIndex(nextSlide));
-        const prevSlide = $wrapperEl.children(`.${swiperParams.slidePrevClass}`);
-        if (prevSlide.length > 0) loadInSlide(slideIndex(prevSlide));
-      }
-    }
-  }
-
-  function checkInViewOnLoad() {
-    const window = getWindow();
-    if (!swiper || swiper.destroyed) return;
-    const $scrollElement = swiper.params.lazy.scrollingElement ? $(swiper.params.lazy.scrollingElement) : $(window);
-    const isWindow = $scrollElement[0] === window;
-    const scrollElementWidth = isWindow ? window.innerWidth : $scrollElement[0].offsetWidth;
-    const scrollElementHeight = isWindow ? window.innerHeight : $scrollElement[0].offsetHeight;
-    const swiperOffset = swiper.$el.offset();
-    const {
-      rtlTranslate: rtl
-    } = swiper;
-    let inView = false;
-    if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
-    const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiper.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiper.height], [swiperOffset.left + swiper.width, swiperOffset.top + swiper.height]];
-
-    for (let i = 0; i < swiperCoord.length; i += 1) {
-      const point = swiperCoord[i];
-
-      if (point[0] >= 0 && point[0] <= scrollElementWidth && point[1] >= 0 && point[1] <= scrollElementHeight) {
-        if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
-
-        inView = true;
-      }
-    }
-
-    const passiveListener = swiper.touchEvents.start === 'touchstart' && swiper.support.passiveListener && swiper.params.passiveListeners ? {
-      passive: true,
-      capture: false
-    } : false;
-
-    if (inView) {
-      load();
-      $scrollElement.off('scroll', checkInViewOnLoad, passiveListener);
-    } else if (!scrollHandlerAttached) {
-      scrollHandlerAttached = true;
-      $scrollElement.on('scroll', checkInViewOnLoad, passiveListener);
-    }
-  }
-
-  on('beforeInit', () => {
-    if (swiper.params.lazy.enabled && swiper.params.preloadImages) {
-      swiper.params.preloadImages = false;
-    }
-  });
-  on('init', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('scroll', () => {
-    if (swiper.params.freeMode && swiper.params.freeMode.enabled && !swiper.params.freeMode.sticky) {
-      load();
-    }
-  });
-  on('scrollbarDragMove resize _freeModeNoMomentumRelease', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('transitionStart', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.loadOnTransitionStart || !swiper.params.lazy.loadOnTransitionStart && !initialImageLoaded) {
-        if (swiper.params.lazy.checkInView) {
-          checkInViewOnLoad();
-        } else {
-          load();
-        }
-      }
-    }
-  });
-  on('transitionEnd', () => {
-    if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('slideChange', () => {
-    const {
-      lazy,
-      cssMode,
-      watchSlidesProgress,
-      touchReleaseOnEdges,
-      resistanceRatio
-    } = swiper.params;
-
-    if (lazy.enabled && (cssMode || watchSlidesProgress && (touchReleaseOnEdges || resistanceRatio === 0))) {
-      load();
-    }
-  });
-  on('destroy', () => {
-    if (!swiper.$el) return;
-    swiper.$el.find(`.${swiper.params.lazy.loadingClass}`).removeClass(swiper.params.lazy.loadingClass);
-  });
-  Object.assign(swiper.lazy, {
-    load,
-    loadInSlide
-  });
-}
-
-/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
-function Controller(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on
-  } = _ref;
-  extendParams({
-    controller: {
-      control: undefined,
-      inverse: false,
-      by: 'slide' // or 'container'
-
-    }
-  });
-  swiper.controller = {
-    control: undefined
-  };
-
-  function LinearSpline(x, y) {
-    const binarySearch = function search() {
-      let maxIndex;
-      let minIndex;
-      let guess;
-      return (array, val) => {
-        minIndex = -1;
-        maxIndex = array.length;
-
-        while (maxIndex - minIndex > 1) {
-          guess = maxIndex + minIndex >> 1;
-
-          if (array[guess] <= val) {
-            minIndex = guess;
-          } else {
-            maxIndex = guess;
-          }
-        }
-
-        return maxIndex;
-      };
-    }();
-
-    this.x = x;
-    this.y = y;
-    this.lastIndex = x.length - 1; // Given an x value (x2), return the expected y2 value:
-    // (x1,y1) is the known point before given value,
-    // (x3,y3) is the known point after given value.
-
-    let i1;
-    let i3;
-
-    this.interpolate = function interpolate(x2) {
-      if (!x2) return 0; // Get the indexes of x1 and x3 (the array indexes before and after given x2):
-
-      i3 = binarySearch(this.x, x2);
-      i1 = i3 - 1; // We have our indexes i1 & i3, so we can calculate already:
-      // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1
-
-      return (x2 - this.x[i1]) * (this.y[i3] - this.y[i1]) / (this.x[i3] - this.x[i1]) + this.y[i1];
-    };
-
-    return this;
-  } // xxx: for now i will just save one spline function to to
-
-
-  function getInterpolateFunction(c) {
-    if (!swiper.controller.spline) {
-      swiper.controller.spline = swiper.params.loop ? new LinearSpline(swiper.slidesGrid, c.slidesGrid) : new LinearSpline(swiper.snapGrid, c.snapGrid);
-    }
-  }
-
-  function setTranslate(_t, byController) {
-    const controlled = swiper.controller.control;
-    let multiplier;
-    let controlledTranslate;
-    const Swiper = swiper.constructor;
-
-    function setControlledTranslate(c) {
-      // this will create an Interpolate function based on the snapGrids
-      // x is the Grid of the scrolled scroller and y will be the controlled scroller
-      // it makes sense to create this only once and recall it for the interpolation
-      // the function does a lot of value caching for performance
-      const translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate;
-
-      if (swiper.params.controller.by === 'slide') {
-        getInterpolateFunction(c); // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid
-        // but it did not work out
-
-        controlledTranslate = -swiper.controller.spline.interpolate(-translate);
-      }
-
-      if (!controlledTranslate || swiper.params.controller.by === 'container') {
-        multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate());
-        controlledTranslate = (translate - swiper.minTranslate()) * multiplier + c.minTranslate();
-      }
-
-      if (swiper.params.controller.inverse) {
-        controlledTranslate = c.maxTranslate() - controlledTranslate;
-      }
-
-      c.updateProgress(controlledTranslate);
-      c.setTranslate(controlledTranslate, swiper);
-      c.updateActiveIndex();
-      c.updateSlidesClasses();
-    }
-
-    if (Array.isArray(controlled)) {
-      for (let i = 0; i < controlled.length; i += 1) {
-        if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
-          setControlledTranslate(controlled[i]);
-        }
-      }
-    } else if (controlled instanceof Swiper && byController !== controlled) {
-      setControlledTranslate(controlled);
-    }
-  }
-
-  function setTransition(duration, byController) {
-    const Swiper = swiper.constructor;
-    const controlled = swiper.controller.control;
-    let i;
-
-    function setControlledTransition(c) {
-      c.setTransition(duration, swiper);
-
-      if (duration !== 0) {
-        c.transitionStart();
-
-        if (c.params.autoHeight) {
-          nextTick(() => {
-            c.updateAutoHeight();
-          });
-        }
-
-        c.$wrapperEl.transitionEnd(() => {
-          if (!controlled) return;
-
-          if (c.params.loop && swiper.params.controller.by === 'slide') {
-            c.loopFix();
-          }
-
-          c.transitionEnd();
-        });
-      }
-    }
-
-    if (Array.isArray(controlled)) {
-      for (i = 0; i < controlled.length; i += 1) {
-        if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
-          setControlledTransition(controlled[i]);
-        }
-      }
-    } else if (controlled instanceof Swiper && byController !== controlled) {
-      setControlledTransition(controlled);
-    }
-  }
-
-  function removeSpline() {
-    if (!swiper.controller.control) return;
-
-    if (swiper.controller.spline) {
-      swiper.controller.spline = undefined;
-      delete swiper.controller.spline;
-    }
-  }
-
-  on('beforeInit', () => {
-    swiper.controller.control = swiper.params.controller.control;
-  });
-  on('update', () => {
-    removeSpline();
-  });
-  on('resize', () => {
-    removeSpline();
-  });
-  on('observerUpdate', () => {
-    removeSpline();
-  });
-  on('setTranslate', (_s, translate, byController) => {
-    if (!swiper.controller.control) return;
-    swiper.controller.setTranslate(translate, byController);
-  });
-  on('setTransition', (_s, duration, byController) => {
-    if (!swiper.controller.control) return;
-    swiper.controller.setTransition(duration, byController);
-  });
-  Object.assign(swiper.controller, {
-    setTranslate,
-    setTransition
-  });
-}
-
-/* eslint no-underscore-dangle: "off" */
-function Autoplay(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  let timeout;
-  swiper.autoplay = {
-    running: false,
-    paused: false
-  };
-  extendParams({
-    autoplay: {
-      enabled: false,
-      delay: 3000,
-      waitForTransition: true,
-      disableOnInteraction: true,
-      stopOnLastSlide: false,
-      reverseDirection: false,
-      pauseOnMouseEnter: false
-    }
-  });
-
-  function run() {
-    if (!swiper.size) {
-      swiper.autoplay.running = false;
-      swiper.autoplay.paused = false;
-      return;
-    }
-
-    const $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
-    let delay = swiper.params.autoplay.delay;
-
-    if ($activeSlideEl.attr('data-swiper-autoplay')) {
-      delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
-    }
-
-    clearTimeout(timeout);
-    timeout = nextTick(() => {
-      let autoplayResult;
-
-      if (swiper.params.autoplay.reverseDirection) {
-        if (swiper.params.loop) {
-          swiper.loopFix();
-          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
-          emit('autoplay');
-        } else if (!swiper.isBeginning) {
-          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
-          emit('autoplay');
-        } else if (!swiper.params.autoplay.stopOnLastSlide) {
-          autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
-          emit('autoplay');
-        } else {
-          stop();
-        }
-      } else if (swiper.params.loop) {
-        swiper.loopFix();
-        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
-        emit('autoplay');
-      } else if (!swiper.isEnd) {
-        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
-        emit('autoplay');
-      } else if (!swiper.params.autoplay.stopOnLastSlide) {
-        autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
-        emit('autoplay');
-      } else {
-        stop();
-      }
-
-      if (swiper.params.cssMode && swiper.autoplay.running) run();else if (autoplayResult === false) {
-        run();
-      }
-    }, delay);
-  }
-
-  function start() {
-    if (typeof timeout !== 'undefined') return false;
-    if (swiper.autoplay.running) return false;
-    swiper.autoplay.running = true;
-    emit('autoplayStart');
-    run();
-    return true;
-  }
-
-  function stop() {
-    if (!swiper.autoplay.running) return false;
-    if (typeof timeout === 'undefined') return false;
-
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = undefined;
-    }
-
-    swiper.autoplay.running = false;
-    emit('autoplayStop');
-    return true;
-  }
-
-  function pause(speed) {
-    if (!swiper.autoplay.running) return;
-    if (swiper.autoplay.paused) return;
-    if (timeout) clearTimeout(timeout);
-    swiper.autoplay.paused = true;
-
-    if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
-      swiper.autoplay.paused = false;
-      run();
-    } else {
-      ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-        swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd);
-      });
-    }
-  }
-
-  function onVisibilityChange() {
-    const document = getDocument();
-
-    if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
-      pause();
-    }
-
-    if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
-      run();
-      swiper.autoplay.paused = false;
-    }
-  }
-
-  function onTransitionEnd(e) {
-    if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
-    if (e.target !== swiper.$wrapperEl[0]) return;
-    ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-      swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
-    });
-    swiper.autoplay.paused = false;
-
-    if (!swiper.autoplay.running) {
-      stop();
-    } else {
-      run();
-    }
-  }
-
-  function onMouseEnter() {
-    if (swiper.params.autoplay.disableOnInteraction) {
-      stop();
-    } else {
-      emit('autoplayPause');
-      pause();
-    }
-
-    ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-      swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
-    });
-  }
-
-  function onMouseLeave() {
-    if (swiper.params.autoplay.disableOnInteraction) {
-      return;
-    }
-
-    swiper.autoplay.paused = false;
-    emit('autoplayResume');
-    run();
-  }
-
-  function attachMouseEvents() {
-    if (swiper.params.autoplay.pauseOnMouseEnter) {
-      swiper.$el.on('mouseenter', onMouseEnter);
-      swiper.$el.on('mouseleave', onMouseLeave);
-    }
-  }
-
-  function detachMouseEvents() {
-    swiper.$el.off('mouseenter', onMouseEnter);
-    swiper.$el.off('mouseleave', onMouseLeave);
-  }
-
-  on('init', () => {
-    if (swiper.params.autoplay.enabled) {
-      start();
-      const document = getDocument();
-      document.addEventListener('visibilitychange', onVisibilityChange);
-      attachMouseEvents();
-    }
-  });
-  on('beforeTransitionStart', (_s, speed, internal) => {
-    if (swiper.autoplay.running) {
-      if (internal || !swiper.params.autoplay.disableOnInteraction) {
-        swiper.autoplay.pause(speed);
-      } else {
-        stop();
-      }
-    }
-  });
-  on('sliderFirstMove', () => {
-    if (swiper.autoplay.running) {
-      if (swiper.params.autoplay.disableOnInteraction) {
-        stop();
-      } else {
-        pause();
-      }
-    }
-  });
-  on('touchEnd', () => {
-    if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
-      run();
-    }
-  });
-  on('destroy', () => {
-    detachMouseEvents();
-
-    if (swiper.autoplay.running) {
-      stop();
-    }
-
-    const document = getDocument();
-    document.removeEventListener('visibilitychange', onVisibilityChange);
-  });
-  Object.assign(swiper.autoplay, {
-    pause,
-    run,
-    start,
-    stop
-  });
-}
-
-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).hasClass(swiper.params.thumbs.slideThumbActiveClass)) return;
-    if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
-    let slideToIndex;
-
-    if (thumbsSwiper.params.loop) {
-      slideToIndex = parseInt($(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10);
-    } else {
-      slideToIndex = clickedIndex;
-    }
-
-    if (swiper.params.loop) {
-      let currentIndex = swiper.activeIndex;
-
-      if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) {
-        swiper.loopFix(); // eslint-disable-next-line
-
-        swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
-        currentIndex = swiper.activeIndex;
-      }
-
-      const prevIndex = swiper.slides.eq(currentIndex).prevAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
-      const nextIndex = swiper.slides.eq(currentIndex).nextAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
-      if (typeof prevIndex === 'undefined') slideToIndex = nextIndex;else if (typeof nextIndex === 'undefined') slideToIndex = prevIndex;else if (nextIndex - currentIndex < currentIndex - prevIndex) slideToIndex = nextIndex;else slideToIndex = prevIndex;
-    }
-
-    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) {
-      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
-      });
-    } 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.addClass(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.removeClass(thumbActiveClass);
-
-    if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
-      for (let i = 0; i < thumbsToActivate; i += 1) {
-        thumbsSwiper.$wrapperEl.children(`[data-swiper-slide-index="${swiper.realIndex + i}"]`).addClass(thumbActiveClass);
-      }
-    } else {
-      for (let i = 0; i < thumbsToActivate; i += 1) {
-        thumbsSwiper.slides.eq(swiper.realIndex + i).addClass(thumbActiveClass);
-      }
-    }
-
-    const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
-    const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
-
-    if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
-      let currentThumbsIndex = thumbsSwiper.activeIndex;
-      let newThumbsIndex;
-      let direction;
-
-      if (thumbsSwiper.params.loop) {
-        if (thumbsSwiper.slides.eq(currentThumbsIndex).hasClass(thumbsSwiper.params.slideDuplicateClass)) {
-          thumbsSwiper.loopFix(); // eslint-disable-next-line
-
-          thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft;
-          currentThumbsIndex = thumbsSwiper.activeIndex;
-        } // Find actual thumbs index to slide to
-
-
-        const prevThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).prevAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
-        const nextThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).nextAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
-
-        if (typeof prevThumbsIndex === 'undefined') {
-          newThumbsIndex = nextThumbsIndex;
-        } else if (typeof nextThumbsIndex === 'undefined') {
-          newThumbsIndex = prevThumbsIndex;
-        } else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
-          newThumbsIndex = thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
-        } else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
-          newThumbsIndex = nextThumbsIndex;
-        } else {
-          newThumbsIndex = prevThumbsIndex;
-        }
-
-        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;
-          }
-        }
-
-        thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
-      }
-    }
-  }
-
-  on('beforeInit', () => {
-    const {
-      thumbs
-    } = swiper.params;
-    if (!thumbs || !thumbs.swiper) return;
-    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
-  });
-}
-
 const ArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>keyboard_arrow_left</title>
@@ -1724,7 +12,7 @@ const ArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}";
+const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-progressbar{background:rgba(0, 0, 0, 0.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size) / 2);z-index:10;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}.swiper-button-lock{display:none}";
 
 const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -1745,14 +33,54 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.touchSliderStart = createEvent(this, "touchSliderStart", 7);
     this.sliderTransitionEnd = createEvent(this, "sliderTransitionEnd", 7);
     this.sliderTransitionStart = createEvent(this, "sliderTransitionStart", 7);
+    /**
+     * Show/hide slider block title
+     */
+    this.blockTitle = '';
+    /**
+     * Show/hide slider block sub title
+     */
+    this.blockSubtitle = '';
+    /**
+     * Show/hide display all button beside arrows
+     */
+    this.displayAllUrl = '';
+    /**
+     * Vertical or Horizontal thumbs slider
+     */
+    this.verticalThumbs = false;
     /**
      * Show/hide arrows
      */
     this.showControls = true;
+    /**
+     * Show/hide arrows
+     */
+    this.controlsOuter = false;
     /**
      * Show/hide thumbs slider arrows
      */
     this.showThumbsControls = true;
+    /**
+     * Enable autoplay  - working with `type="carousel" only`
+     */
+    this.autoPlay = false;
+    /**
+     * slidesPerView
+     */
+    this.slidesPerView = "auto";
+    /**
+     * Enable pagination
+     */
+    this.pagination = false;
+    /**
+     * Enable center mode  - working with `type="carousel" only`
+     */
+    this.centered = false;
+    /**
+     * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue
+     */
+    this.loop = false;
     /**
      * Set the type of the slider
      * Default: ''
@@ -1771,22 +99,57 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.sliderConfig = {};
     /**
-    * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
-    * @example
-    * let slider = document.querySelector('salla-slider');
-    *  slider.thumbsConfig = {
-    *  slidesPerView: 1,
-    *  spaceBetween : 30,
-    *  lazy: true,
-    * }
-    *
-    */
+     * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
+     * @example
+     * let slider = document.querySelector('salla-slider');
+     *  slider.thumbsConfig = {
+     *  slidesPerView: 1,
+     *  spaceBetween : 30,
+     *  lazy: true,
+     * }
+     *
+     */
     this.thumbsConfig = {};
     // States
     this.currentIndex = undefined;
     this.isEnd = false;
     this.isBeginning = true;
     this.isRTL = document.documentElement.dir === 'rtl';
+    this.pre_defined_config = {
+      carousel: {
+        speed: 300,
+        slidesPerView: 'auto',
+        spaceBetween: 0,
+      },
+      fullscreen: {
+        speed: 750,
+        parallax: true,
+        autoplay: {
+          delay: 5000,
+        },
+      },
+      testimonials: {
+        draggable: true,
+        slidesPerView: 1,
+        breakpoints: { 1024: { slidesPerView: 2 } }
+      },
+      blog: {
+        slidesPerView: 1,
+        centeredSlides: true,
+        spaceBetween: 30,
+        effect: "fade",
+        breakpoints: {
+          320: { spaceBetween: 10 },
+          768: { spaceBetween: 15 },
+          980: { paceBetween: 30 },
+        }
+      },
+      thumbs: {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        autoHeight: true
+      }
+    };
   }
   // Methods
   /**
@@ -1797,7 +160,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slideTo(index, speed, runCallbacks) {
-    this.slider.slideTo(index, speed, runCallbacks);
+    return this.slider.slideTo(index, speed, runCallbacks);
   }
   /**
    * Run transition to the next slide.
@@ -1806,7 +169,8 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slideNext(speed, runCallbacks) {
-    this.slider.slideNext(speed, runCallbacks);
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slideNext(speed, runCallbacks);
   }
   /**
    * Run transition to the previous slide.
@@ -1815,7 +179,8 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slidePrev(speed, runCallbacks) {
-    this.slider.slidePrev(speed, runCallbacks);
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slidePrev(speed, runCallbacks);
   }
   /**
    * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
@@ -1862,7 +227,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.slider.slideToClosest(speed, runCallbacks);
   }
   /**
-   * 	You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
+   *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
    * **/
   async update() {
     this.slider.update();
@@ -1892,106 +257,186 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async updateSlidesClasses() {
     this.slider.updateSlidesClasses();
   }
-  componentDidLoad() {
-    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
-    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
-    if (this.type == 'thumbs') {
-      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
-      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
-    }
-    this.initSlider();
+  /**
+   * Get slider slides
+   * **/
+  async getSlides() {
+    var _a;
+    return await ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.slides);
   }
-  initSlider() {
-    Swiper.use([Controller, Navigation, Pagination, Lazy, Thumb, Parallax, Autoplay]);
-    for (const slide of this.sliderWrapper.children) {
-      //todo:: use `s-slider-slide`
-      slide.classList.add('swiper-slide');
-    }
-    if (this.type == 'carousel') {
-      this.slider = new Swiper(this.sliderContainer, {
-        loop: false,
-        speed: 300,
-        slidesPerView: 'auto',
-        spaceBetween: 10,
-      });
-    }
-    else if (this.type == 'thumbs') {
-      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, Object.assign({}, this.thumbsConfig));
+  componentWillLoad() {
+    salla.lang.onLoaded(() => {
+      this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+    });
+    return new Promise((resolve, reject) => {
+      // @ts-ignore
+      if (typeof Swiper !== 'undefined') {
+        return resolve(true);
+      }
+      if (document.getElementById('swiper-script')) {
+        let interval = setInterval(() => {
+          // @ts-ignore
+          if (typeof Swiper !== 'undefined') {
+            clearInterval(interval);
+            resolve(true);
+          }
+        }, 5);
+      }
+      else {
+        // ? There is an issue with stencil bundling it breaks the swiper import, so we need to import it manually by swiperjs rerendered file
+        // ! IT'S NOT A GOOD SOLUTION, BUT IT WORKS, WE NEED TO FIND A BETTER SOLUTION
+        this.swiperScript = document.createElement('script');
+        this.swiperScript.onload = () => {
+          resolve(true);
+          salla.event.emit('swiper::loaded');
+        };
+        this.swiperScript.onerror = (error) => {
+          salla.logger.warn('failed load swiper bundle', error);
+          reject(true);
+        };
+        this.swiperScript.src = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js';
+        this.swiperScript.setAttribute('id', 'swiper-script');
+        document.body.appendChild(this.swiperScript);
+      }
+    });
+  }
+  getSwiperConfig() {
+    let pre_defined_config = {
+      loop: this.loop,
+      autoplay: this.autoPlay,
+      centeredSlides: this.centered,
+      slidesPerView: this.slidesPerView,
+      lazy: true,
+      on: {
+        // todo:: find better way for this workaround to show lazyLoad for duplicated slides, for some reason they are loaded but class not added.
+        afterInit: (slider) => this.loop && slider.slides.map(slide => {
+          var _a;
+          (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
+          if (!slide.classList.contains('swiper-slide-duplicate')) {
+            return;
+          }
+          slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
+        }),
+      },
+      pagination: this.pagination ? {
+        el: this.host.id ? `#${this.host.id} .swiper-pagination` : '',
+        clickable: true,
+      } : false,
+      navigation: this.showControls ? {
+        nextEl: this.host.id ? `#${this.host.id} .s-slider-next` : '',
+        prevEl: this.host.id ? `#${this.host.id} .s-slider-prev` : ''
+      } : false,
+      breakpoints: {
+        768: {
+          direction: this.verticalThumbs ? "vertical" : "horizontal",
+        },
+      },
+    };
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
+    if (this.type == 'thumbs') {
       for (const slide of this.thumbsSliderWrapper.children) {
         //todo:: use `s-slider-slide`
         slide.classList.add('swiper-slide');
       }
-      this.slider = new Swiper(this.sliderContainer, {
-        slidesPerView: 1,
-        spaceBetween: 30,
-        lazy: true,
-        thumbs: {
-          swiper: this.thumbsSlider,
+      // @ts-ignore
+      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, {
+        freeMode: false,
+        watchSlidesProgress: true,
+        slidesPerView: 4,
+        spaceBetween: 10,
+        watchOverflow: true,
+        watchSlidesVisibility: true,
+        breakpoints: {
+          768: {
+            direction: this.verticalThumbs ? "vertical" : "horizontal",
+            spaceBetween: 16,
+          },
         },
       });
+      // @ts-ignore
+      pre_defined_config.thumbs = {
+        swiper: this.thumbsSlider,
+      };
     }
-    else {
-      this.slider = new Swiper(this.sliderContainer, Object.assign({}, this.sliderConfig));
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), this.sliderConfig);
+    return pre_defined_config;
+  }
+  initSlider() {
+    for (const slide of this.sliderWrapper.children) {
+      //todo:: use `s-slider-slide`
+      slide.classList.add('swiper-slide');
     }
+    // @ts-ignore
+    this.slider = new Swiper(this.sliderContainer, this.getSwiperConfig());
     // Expose slider events
     this.slider.on('slideChange', (slider) => {
+      //todo:: it doesn't change when loop is active, always will be false
       this.isBeginning = slider.isBeginning;
       this.isEnd = slider.isEnd;
       this.slideChange.emit(slider);
     });
-    this.slider.on('reachBeginning', (slider) => {
-      // this.isBeginning = true;
-      this.reachBeginning.emit(slider);
-    });
-    this.slider.on('reachEnd', (slider) => {
-      // this.isEnd = true;
-      this.reachEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionEnd', (slider) => {
-      this.slideChangeTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionStart', (slider) => {
-      this.slideChangeTransitionStart.emit(slider);
-    });
-    this.slider.on('slideNextTransitionEnd', (slider) => {
-      this.slideNextTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideNextTransitionStart', (slider) => {
-      this.slideNextTransitionStart.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionEnd', (slider) => {
-      this.slidePrevTransitionEnd.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionStart', (slider) => {
-      this.slidePrevTransitionStart.emit(slider);
-    });
-    this.slider.on('sliderMove', (slider) => {
-      this.sliderMove.emit(slider);
-    });
-    this.slider.on('touchEnd', (slider) => {
-      this.touchSliderEnd.emit(slider);
-    });
-    this.slider.on('touchMove', (slider) => {
-      this.touchSliderMove.emit(slider);
-    });
-    this.slider.on('touchStart', (slider) => {
-      this.touchSliderStart.emit(slider);
-    });
-    this.slider.on('transitionEnd', (slider) => {
-      this.sliderTransitionEnd.emit(slider);
-    });
-    this.slider.on('transitionStart', (slider) => {
-      this.sliderTransitionStart.emit(slider);
-    });
+    this.slider.on('reachBeginning', (slider) => this.reachBeginning.emit(slider));
+    this.slider.on('reachEnd', (slider) => this.reachEnd.emit(slider));
+    this.slider.on('slideChangeTransitionEnd', (slider) => this.slideChangeTransitionEnd.emit(slider));
+    this.slider.on('slideChangeTransitionStart', (slider) => this.slideChangeTransitionStart.emit(slider));
+    this.slider.on('slideNextTransitionEnd', (slider) => this.slideNextTransitionEnd.emit(slider));
+    this.slider.on('slideNextTransitionStart', (slider) => this.slideNextTransitionStart.emit(slider));
+    this.slider.on('slidePrevTransitionEnd', (slider) => this.slidePrevTransitionEnd.emit(slider));
+    this.slider.on('slidePrevTransitionStart', (slider) => this.slidePrevTransitionStart.emit(slider));
+    this.slider.on('sliderMove', (slider) => this.sliderMove.emit(slider));
+    this.slider.on('touchEnd', (slider) => this.touchSliderEnd.emit(slider));
+    this.slider.on('touchMove', (slider) => this.touchSliderMove.emit(slider));
+    this.slider.on('touchStart', (slider) => this.touchSliderStart.emit(slider));
+    this.slider.on('transitionEnd', (slider) => this.sliderTransitionEnd.emit(slider));
+    this.slider.on('transitionStart', (slider) => this.sliderTransitionStart.emit(slider));
   }
   render() {
     var _a, _b, _c, _d;
-    return (h(Host, { class: "s-slider-wrapper" }, h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, h("div", { class: "swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.showControls ? [h("div", { class: "s-slider-button-prev" }, h("salla-button", { shape: "icon", disabled: this.isRTL ? this.isEnd : this.isBeginning, color: "light", onClick: () => this.isRTL ? this.slideNext() : this.slidePrev() }, h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), h("div", { class: "s-slider-button-next" }, h("salla-button", { disabled: this.isRTL ? this.isBeginning : this.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.slidePrev() : this.slideNext() }, h("span", { class: "s-slider-button-icon", innerHTML: KeyboardArrowRightIcon })))] : ''), this.type == 'thumbs' ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, h("div", { class: "swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ? [h("div", { class: "s-slider-button-prev" }, h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), h("div", { class: "s-slider-button-next" }, h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, h("span", { class: "s-slider-button-icon", innerHTML: KeyboardArrowRightIcon })))] : '')) : ''));
+    let classes = this.type ? this.type + '-slider ' : '';
+    classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
+    classes += this.blockTitle == '' ? ' s-slider-has-notitle s-slider-v-centered ' : '';
+    classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal';
+    return (h(Host, { class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+      h("div", { class: "s-slider-block__title" }, this.blockTitle ?
+        h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
+        : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
+        h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
+        : '', this.showControls ?
+        h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : KeyboardArrowRightIcon })))
+        : ''))
+      : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ? [h("div", { class: "s-slider-button s-slider-button-prev" }, h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : KeyboardArrowRightIcon }))), h("div", { class: "s-slider-button s-slider-button-next" }, h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? KeyboardArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
+  }
+  componentDidLoad() {
+    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
+    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
+    if (this.type == 'thumbs') {
+      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
+      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
+    }
+    // if swiper is not loaded, lets relay on event
+    // @ts-ignore
+    if (typeof Swiper === 'undefined') {
+      salla.event.once('swiper::loaded', () => this.initSlider());
+    }
+    else { // if swiper is loaded lets init our slider
+      this.initSlider();
+    }
   }
+  get host() { return this; }
   static get style() { return sallaSliderCss; }
 }, [4, "salla-slider", {
+    "blockTitle": [513, "block-title"],
+    "blockSubtitle": [513, "block-subtitle"],
+    "displayAllUrl": [513, "display-all-url"],
+    "verticalThumbs": [516, "vertical-thumbs"],
     "showControls": [516, "show-controls"],
+    "controlsOuter": [516, "controls-outer"],
     "showThumbsControls": [4, "show-thumbs-controls"],
+    "autoPlay": [4, "auto-play"],
+    "slidesPerView": [1, "slides-per-view"],
+    "pagination": [4],
+    "centered": [4],
+    "loop": [4],
     "type": [1],
     "sliderConfig": [520, "slider-config"],
     "thumbsConfig": [520, "thumbs-config"],
@@ -1999,6 +444,8 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "isEnd": [32],
     "isBeginning": [32],
     "isRTL": [32],
+    "swiperScript": [32],
+    "displayAllTitle": [32],
     "slideTo": [64],
     "slideNext": [64],
     "slidePrev": [64],
@@ -2011,7 +458,8 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "updateAutoHeight": [64],
     "updateSlides": [64],
     "updateProgress": [64],
-    "updateSlidesClasses": [64]
+    "updateSlidesClasses": [64],
+    "getSlides": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {