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 >
  
      <button> Tab 1</button>
       <button> Tab 2</button>
       <button> Tab 3</button>
        
    <div id="tab" >
        <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

CodePudding user response：

Yes, it is possible to make the tabs on your website fully responsive so that they can be swiped through on mobile devices. To do this, you will need to add some additional code to your existing JavaScript and CSS.

First, you will need to add support for touch events to your JavaScript code. This will allow your code to detect when the user swipes left or right on the screen. You can do this by adding the following code:

// detect touch events
if (document.ontouchstart !== null) {
  // register touch events
  document.addEventListener('touchstart', handleTouchStart, false);
  document.addEventListener('touchmove', handleTouchMove, false);
}

Next, you will need to add some new event handler functions to your JavaScript code. These functions will handle the touchstart and touchmove events that were registered in the previous step. They will be responsible for updating the data-tab attribute of the tabs element based on the direction of the swipe. You can add these functions as follows:

// handle touch start event
function handleTouchStart(event) {
  // get the touch event object
  const touch = event.touches[0];
  // store the starting position of the touch
  touchStartX = touch.pageX;
}

// handle touch move event
function handleTouchMove(event) {
  // get the touch event object
  const touch = event.touches[0];
  // store the current position of the touch
  touchEndX = touch.pageX;

  // calculate the difference between the starting and current positions of the touch
  const diffX = touchStartX - touchEndX;

  // if the touch moved more than 50 pixels to the left,
  // set the data-tab attribute to the next tab
  if (diffX > 50) {
    const currentTab = document.getElementById('tab').getAttribute('data-tab');
    const nextTab = parseInt(currentTab)   1;
    document.getElementById('tab').setAttribute('data-tab', nextTab);
  }

  // if the touch moved more than 50 pixels to the right,
  // set the data-tab attribute to the previous tab
  if (diffX < -50) {
    const currentTab = document.getElementById('tab').getAttribute('data-tab');
    const nextTab = parseInt(currentTab) - 1;
    document.getElementById('tab').setAttribute('data-tab', nextTab);
  }
}

Finally, you will need to update your CSS code to make the tabs fully responsive. This will involve adding some new rules to adjust the width and position of the tabs based on the screen size. You can do this as follows:

.tabs {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tabs > * {
  width: 100%;
  height: 100%;
  position: absolute;
}

.tabs[data-tab='1'] {
  left: 0%;
}

.tabs[data-tab='2'] {
  left: -100%;
}

.tabs[data-tab='3'] {
  left: -200%;
}