Как реализовать такой слайдер с открытием контента Swiper?

В итоге должно получится: у меня есть слайдер, и при нажатии на кнопку должно открыватся содержимое кейса, и внутри этого кейса должны быть стрелки с переключением содержимого след./пред. кейса. (по фотографиям должно быть понятно)

Я думаю внутри этого слайдера сделать еще один(так по стрелкам будут переключатся и внешний слайдер с кейсами). Но тут вопрос можно ли будет к кнопкам привязать содержимое кейса. И подойдет ли такой способ к WordPress?

var site = new Swiper(".site", {
  slidesPerView: 3,
  spaceBetween: 30,
  init: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },

  breakpoints: {
    320: {
      slidesPerView: 1,
    },
    990: {
      slidesPerView: 1,
    },
    991: {
      slidesPerView: 3,
    },
  },

});

site.on("slideChange afterInit init", function () {
  let currentSlide = this.activeIndex + 1;
  document.querySelector('.counter').innerHTML = `
  <span class="counter__current">
  ${currentSlide < 10 ? '0' + currentSlide : currentSlide}
  </span>  
  <span class="counter__total">
    /${this.slides.length}
  </span>`;
});

site.init();

<div class="swiper site">
        
    <div class="swiper-wrapper">

        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>

    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>