<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

   <div class="swiper-container container__swiper">
      <div class="swiper-wrapper wrapper__swiper">
         <div class="swiper-slide">slide 1</div>
         <div class="swiper-slide">slide 2</div>
         <div class="swiper-slide">slide 3</div>
         <div class="swiper-slide">slide 4</div>
      </div>
   </div>
   
   <div class="inner__block">
      <div id="tab-1" class="block__text show">1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum aliquam maiores perspiciatis necessitatibus ullam voluptatum aspernatur quasi magnam sequi dicta?</div>
      <div id="tab-2" class="block__text">2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum aliquam maiores perspiciatis necessitatibus ullam voluptatum aspernatur quasi magnam sequi dicta?</div>
      <div id="tab-3" class="block__text">3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum aliquam maiores perspiciatis necessitatibus ullam voluptatum aspernatur quasi magnam sequi dicta?</div>
      <div id="tab-4" class="block__text">4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum aliquam maiores perspiciatis necessitatibus ullam voluptatum aspernatur quasi magnam sequi dicta?</div>
  
      <div class="swiper-container menu">
         <div class="swiper-wrapper">
               <div class="swiper-slide menu__list">Пункт 1</div>
               <div class="swiper-slide menu__list">Пункт 2</div>
               <div class="swiper-slide menu__list">Пункт 3</div>
               <div class="swiper-slide menu__list">Пункт 4</div>
         </div>
      </div>
   </div>


   <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

.container__swiper {
   width: 400px;
   height: 200px;
   margin: 0 auto;
   background-color: aqua;
}

.inner__block {
   display: flex;
}

.block__text {
   display: none;
   font-size: 18px;
   padding: 50px;
   width: 350px;
}

/* .hide {
   display: none;
} */

.block__text.show {
  display: block;
}


.menu {
   width: 300px;
   margin: 0 auto;
   height: 100px;
}

.menu__list {
   margin-top: 50px;
   text-align: center;
   cursor: pointer;
   background-color: coral;
   border: 1px solid black;
}

.swiper-slide-thumb-active {
  background-color: green;
}

let slideImg = new Swiper('.container__swiper', {
  slidesPerView: 1,
  thumbs: {
    swiper: {
      el: '.menu',
      slidesPerView: 4,
    }
  }
});
let innerBlock = document.querySelector('.inner__block');
let tabs = innerBlock.querySelectorAll('.block__text');
slideImg.on('slideChange', function () {
  tabs.forEach(el => {
    el.classList.remove('show');
  })
  let currentSlide = ++slideImg.realIndex;
  let = currentTab = document.getElementById('tab-' + currentSlide);
  currentTab.classList.add('show');
});


// реализация на jquery
// let innerBlock = $('.inner__block');
// let tabs = $('.block__text');
// slideImg.on('slideChange', function () {
//   tabs.each(function(index, el) {
//     $(el).removeClass('show');
//   })
//   let currentSlide = ++slideImg.realIndex;
//   let currentTab = $('#tab-' + currentSlide);
//   $(currentTab).addClass('show');
// });