Show content based on active link in nav bar

I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.active-link {
  position: relative;
  display: flex;
  top: 12rem;
  /*position for active link */
  justify-content: center;
}

.button {
  padding: 0 40px 10px 40px;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  border-bottom: 2px solid black;
}

.button:active,
.active {
  color: red;
  border-bottom: 5px solid red;
  padding-bottom: 7px;
}

.slide-container {
  position: relative;
  // I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
  top: 14rem;
  display: none;
}

.slide-container.active {
  display: block;
}

<!-- language: lang-html -->

<div class="active-link" id="active-link">
  <li>
    <a class="button">Him</a>
  </li>
  <li>
    <a class="button active">2</a>
  </li>
  <li>
    <a class="button">Her</a>
  </li>
</div>
<div class="slide-containers">
  <div id="slide-container-1" class="slide-container">
    Slide Container 1
  </div>
  <div id="slide-container-2" class="slide-container">
    Slide Container 2
  </div>
  <div id="slide-container-3" class="slide-container">
    Slide Container 3
  </div>
</div>



<script>
  var btnContainer = document.getElementById("active-link");
  var btns = btnContainer.getElementsByClassName("button");

  function removeClass(elems, className) {
    [].forEach.call(document.querySelectorAll(elems), function(el) {
      el.classList.remove(className);
    });
  }

  const resetSlideContainers = () => {
    [...document.querySelectorAll('.slide-container')].forEach((slide) =>
      slide.classList.remove('active'));
  }

  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function(e) {
      removeClass('.button', 'active')
      this.classList.toggle('active');
      resetSlideContainers();
      document.getElementById(this.getAttribute('data-slide')).classList.add('active');
    })
  }
</script>

<!-- end snippet -->

I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");

function removeClass(elems, className) {
  [].forEach.call(document.querySelectorAll(elems), function(el) {
    el.classList.remove(className);
  });
}

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function(e) {
    removeClass('.button', 'active')
    this.classList.toggle('active');
  })
}

<!-- language: lang-css -->

.active-link {
  position: relative;
  display: flex;
  top: 12rem;
  justify-content: center;
}

.button {
  padding: 0 40px 10px 40px;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  border-bottom: 2px solid black;
}

.button:active,
.active {
  color: red;
  border-bottom: 5px solid blue;
  padding-bottom: 7px;
}

<!-- language: lang-html -->

<div class="active-link" id="active-link">
  <li>
    <a class="button">1</a>
  </li>
  <li>
    <a class="button active">2</a>
  </li>
  <li>
    <a class="button">3</a>
  </li>
</div>

<!-- end snippet -->