Raymont

Приветствую) Сам столкнулся с подобной проблемой и решил её следующим образом.

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Navigation: {
      prevTpl:
        '<button tabindex="0" title="Назад" class="f-button is-prev" data-carousel-prev="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg></button>' +
        "</button>",
      nextTpl:
        '<button tabindex="0" title="Далее" class="f-button is-next" data-carousel-next="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg></button>' +
        "</button>",
    },
  },

  tpl: {
    closeButton:
      '<button data-fancybox-close class="f-button is-close-btn" title="Закрыть">' +
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg>' +
      "</button>",
  },
});

Используйте position: sticky когда пользователь начинает скроллить на контейнере и обрабатывайте скролл уже через js

.slide-active {
tranform: scale(...)
}

или

.swiper-slide {
tranform: scale(меньше 1);
}
.swiper-slide.slide-active {
tranform: scale(1);
}

Надеюсь это поможет.

const input  = document.querySelector('input');
const button = document.querySelector('#button');

button.addEventListener('click', function() {
input.value = Number(input.value) + 1;
input.setAttribute('value', input.value);
console.log(input.value);
});