Make Tabs responsive and draggable on mobile/web

Question

Im using the tabs shown below on my website.

Is it possible to make them fully responsive, so that i can swipe through the content or would that be too complex to write out?

Dont have much experience.

My Tabs:

const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    btn.forEach((item) => {item.classList.remove('active')})
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)
  })
}  
)

.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
 
}

.tabs> * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {

    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
}

<div class="wrapper">
  
      <button> Tab 1</button>
       <button> Tab 2</button>
       <button> Tab 3</button>
        
    <div id="tab" class="tabs inliner">
        <div>
            <h2>Content 1</h2>
        
        </div>
        <div>
            <h2>Content 2</h2>
       
        </div>
        <div>
            <h2>Content 3</h2>
            
        </div>
    </div>
</div>

Again, i would like to make the tab content draggable, also on mobile.

Glad for any help