Section with left and right buttons to switch between 0 1 2 elements

So I have this section

<section class="section2 container rounded-pill d-flex d-md-block align-items-center justify-content-between bottomSide">
    <div onclick="switchLeft()">
      <img class="switch-left d-block d-md-none" src="./assets/svg/Arrow-Right-Small.svg" alt="">
    </div>
    <div class="
        rounded-pill row row-cols-1
        row-cols-md-3
        p-4
        justify-content-center
        switches-container">
      <div class="d-flex gap-3 flex-wrap flex-md-nowrap align-items-center justify-content-center">
        <div class="d-flex justify-content-center p-3">
          <img src="./assets/svg/Location.svg" alt="">
        </div>
        <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
          <span class="d-none d-md-block fs-5">Pay Us a Visit</span>
          <span class="small fw-normal">Union St, Seattle, WA 98101, United States</span>
        </div>
      </div>
      <div
        class="d-none d-md-flex border-start border-end border-secondary gap-3 align-items-center justify-content-center">
        <div class="d-flex justify-content-center p-3">
          <img src="./assets/svg/Phone.svg" alt="">
        </div>
        <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
          <span class=" d-none d-md-block fs-5">Give Us a Call</span>
          <span class="small fw-normal">(110) 1111-1010</span>
        </div>
      </div>
      <div class="d-none d-md-flex  gap-3 align-items-center justify-content-center">
        <div class="d-flex justify-content-center p-3">
          <img src="./assets/svg/Email.svg" alt="">
        </div>
        <div class="d-flex flex-column gap-1 justify-content-center align-items-center">
          <span class=" d-none d-md-block fs-5">Send Us a Message</span>
          <span class="small fw-normal">[email protected]</span>
        </div>
      </div>
    </div>
    <div onclick="switchRight()">
      <img class="switch-right d-block d-md-none" src="./assets/svg/Arrow-Left-Small.svg" alt="">
    </div>
  </section>

And the JS code for it is

let indexer = 0
const switchesContainer = document.querySelector(".switches-container")
let children = [];

for (let i = 0; i < switchesContainer.children.length; i++) {
    children[i] = switchesContainer.children[i].innerHTML;
}

// I need to adjust the following JS Code
function switchLeft() {
    switchesContainer.children[0].innerHTML = children[--indexer];


    if (indexer < 0) {
        // Reset Indexer
        indexer = 2
        // Show last one so we start from the end to be switched from start in the left direction
        switchesContainer.children[0].innerHTML = children[indexer]

    }

}

function switchRight() {
    switchesContainer.children[0].innerHTML = children[++indexer];


    if (indexer > 2) {
        // Reset Indexer
        indexer = 0
        // Show last one so we start from the end to be switched from end in the right direction
        switchesContainer.children[0].innerHTML = children[indexer]

    }
}

So there is 3 elements together and left, right arrow, when the screen gets smaller only the first element would be shown and beside it the arrows on each side enter image description here

So know the solution I did, I don’t think it’s good enough so if you have a better solution like when i press that button the element gets transform:translateX(number) or giving it an effect this would be great.

Thank you.

I tried the JS I provided previously and it does what I need but it’s ugly af.