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

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

resistanceRatio: 0,

Как-то так:

По-быстрому набросал:

В десктопной версии просто скроллим к нужному слайду, ну а в мобильной делаем полноценный слайдер как нужно...

hashNavigation: true,
Demo

Если я правильно понял, то как вариант:

Сделайте так:

function init() {
  new Swiper(".swiper", {
    slidesPerView: 2,
    spaceBetween: 30,
    scrollbar: {
      el: ".swiper-scrollbar"
    },
    breakpoints: {
      0: {
        slidesPerView: 2,
        scrollbar: {
          enabled: true
        }
      },
      500: {
        slidesPerView: 3,
        scrollbar: {
          enabled: false
        }
      }
    }
  });
}

setTimeout(init, 1000);

Воспользуйтесь tippyjs и вызывайте её с параметром:
appendTo: () => document.body,
Контент будет помещен поверх всего сайта

Еще отдельно вопрос- по структуре кода можно ли оставить в таком виде слайдер в виде списка UL>LI, каждый li завернуть в .swiper-slide или переделать на .swiper-slide> div>button

li должны быть вложены в ul в таком виде:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

И никак иначе, поэтому вы можете сделать разве что так:

<ul class="swiper-wrapper">
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
</ul>

Это не баг, это ваша невнимательность. Вы переключаетесь на вторую галерею и начинаете листать до конца, слайды ушли в лево и перекрыли предыдущую галерею, почему? Потому что вы не добавили overflow: hidden; к контейнеру .gallery__slider-inner в котором находится галерея.. Поэтому когда вы переключаетесь обратно на первую галерею, вы все еще видите вторую минус один слайд от неё за счет пролистывания переключателя. Надеюсь вы поняли о чем я говорю

Например так, если я правильно понимаю задачу:

Вот код из примера, который я вам дал в прошлом вопросе:

pagination: {
			el: el.querySelector('.swiper-pagination'),
			clickable: true
		},
		 navigation: {
			  nextEl: el.querySelector('.swiper-arrow-next'),
			  prevEl: el.querySelector('.swiper-arrow-prev')
		 }

Вот ваш код:

pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },

Что еще нужно сделать, чтобы вы начали думать?

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

Для этого есть breakpoints.
Смотрите документацию и примеры в ней.

var swiper = new Swiper(".swiper", {
    slidesPerView: 3,
    spaceBetween: 20,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 16
    },
    // when window width is >= 1000px
    1000: {
      slidesPerView: 3,
      spaceBetween: 20
    },
  }
});

Как-то так:

Там все нормально работает, ровно так как вы и написали в стилях.
flex: 0 0 100%; для .reviews-item зачем вы переопределили flex-basis? Убирайте
max-width во все местах для слайда зачем? Как слайдер может рассчитать себе необходимое пространство, если вы ему его на даете?
В одном месте вы заставляете слайды занимать больше места чем им нужно, в другом же ограничиваете, определитесь.
То же самое с padding и border для слайда, вы не задали box-sizing: border-box; поэтому вы свои слайды увеличили на величину отступов. В общем разбирайтесь со своими стилями
И не надо переопределять стили слайдов, вставляйте свой код внутрь слайда и внутри делайте что хотите