Виталий Першин

<button data-fancybox-trigger="gallery" data-fancybox-index="0">Open gallery</button>

Он у тебя на всех работает, просто последний слайд идет поверх остальных и скрывается только при помощи opacity: 0;
Добавь ко всем неактивным слайдам pointer-events: none; или visibility: hidden;

Весь фокус в этом:

border: 1px solid transparent;
background: linear-gradient(#e5e2e2, #e5e2e2 0) padding-box,
linear-gradient(90deg, #fa5560, #4d91ff) border-box;

Не совсем понятно для чего именно нужно это делать и нужен ли там вообще слайдер. Если например
swiper, то там нужны параметры:

speed: 1000,
autoplay: {
		delay: 0,
		enabled: true,
	}

И нужно transition переопределить:

.swiper-wrapper {
	transition-timing-function: linear !important
}

Можно прокручивать без слайдеров, при помощи css:

https://developer.mozilla.org/en-US/docs/Web/CSS/a...
aspect-ratio: 1 / 1;

Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:

mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

Стилями

.fancybox-show-thumbs .fancybox-inner {
  right: 0;
  left: 212px;
}
.fancybox-show-thumbs .fancybox-thumbs {
  right: auto;
  left: 0;
}

clip-path

-webkit-mask

Например так:

Если нижняя часть одинакового размера, то можно её отодвинуть при помощи flexbox



Есть еще subgrid, но поддержка пока слабая

Как вариант:

Если мой хрустальный шар прав, то нужно добавить flex-shrink: 0; для элементов, которые внутри flex контейнера, чтобы ваш width: 120px; применился...

Накидал на скорую руку, один из вариантов:

Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.

https://refreshless.com/nouislider/

В конфиг настроек добавить:
"editor.stickyScroll.enabled": false

Либо открываем Файл > Настройки > Параметры (CTRL+,), находим Editor>Sticky Scroll: Enabled, убираем галочку:

Волшебной кнопки нет, если вы об этом. А дизайн, можно сверстать и адаптировать практически под любую cms, в том числе и WP, но тут я вижу только дизайн под мобильную версию. Если хотите сделать адаптацию под CMS максимально простым способом, тогда сделайте дизайн исходя из структуры и функционала текущей версии сайта.