(JavaScript) How to Add Prev and Next Button to Tabs?

Question

Hope you all have a nice day and Happy Weekend!

I want to ask about adding prev and next button in my Tabs. I already add it, with some JavaScript that referenced to this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow.

I know it's kind of weird to reference tab with the carousel but, I think that the principle is the same. But in my code, i don't know how to code it. I'm so sorry because I'm very noob in JavaScript. So, here's my attempt :

//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
    let tabs = document.querySelectorAll('.tab');
    let content = document.querySelectorAll('.content');
    let prev = document.querySelector('.previous');
    let next = document.querySelector('.next');
    let firstTab = function(tabs) {tabs.classList.add('tab-active')};
    let firstContent = function(content) {content.classList.add('content-active')};
  
    firstTab(tabs[0]);
    firstContent(content[0]);
        
        for (let i = 0; i < tabs.length; i++) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        prev.addEventListener('click', (i) => tabClick(i - 1));
        next.addEventListener('click', (i) => tabClick(i + 1));

        
        function tabClick(currentTab) {
          removeActive();
            //Add Active Class
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
        }  
        function removeActive() {
          for (let i = 0; i < tabs.length; i++) {
            //Remove Active Class
            content[i].classList.remove('content-active');
            content[i].classList.add('content-show');
            setTimeout(function() {
              content[i].classList.remove('content-show');
            },1500);
            tabs[i].classList.remove('tab-active');
          }
         }
       })

        /* WHOLE CONTAINER */
        .container {
          width: 96vw;
          height: 96vh;
        }
        
        /* TABS */
        .tabs {
            display: flex;
            height: 50px;
            overflow: hidden;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .tab {
            font-size: 14px;
            padding: 5px 10px;
            cursor: pointer;
            letter-spacing: 2px;
        }

        #red.tab-active {background-color: rgb(245, 66, 66);}
        #blue.tab-active {background-color: rgb(66, 135, 245);}
        #yellow.tab-active {background-color: rgb(245, 215, 66);}
        #green.tab-active {background-color: rgb(56, 235, 98);}
        #cyan.tab-active {background-color: rgb(79, 247, 219);}


        /* TAB CONTENTS */
        .contents {
            width: 100%;
            margin-top: 5px;
            height: 80%;
        }

        .content {
            width: 96%;
            height: 80%;
            display: none;
            padding: 0;
            margin: 0;
            border: none;
            position: absolute;
        }

        .content-show {
            display: flex;
            animation-name: fade-out;
            animation-duration: 2.5s;
        }
        
        @keyframes fade-out {
            0% {
                opacity: 1;
                display: flex;
            }
            99% {
                opacity: 0;
                display: flex;
            }
            100% {
                opacity: 0;
                display: none;
            }
        }

        .content-active {
            display: flex;
            border: none;
            justify-content: center;
            animation-name: fade-in;
            animation-duration: 2.5s;
        }

        @keyframes fade-in {
            0% {
                display: none;
                opacity: 0;
            }
            1% {
                display: block;
                opacity: 0.01;
            }
            100%{
                display: block;
                opacity: 1;
            }
        }

        #red.content-active {background-color: rgb(245, 66, 66);}
        #blue.content-active {background-color: rgb(66, 135, 245);}
        #yellow.content-active {background-color: rgb(245, 215, 66);}
        #green.content-active {background-color: rgb(56, 235, 98);}
        #cyan.content-active {background-color: rgb(79, 247, 219);}

        /* BUTTON PREVIOUS NEXT */
        .button {
          position: absolute;
          top: 49%;
          z-index: 4;
        }

        .previous, .next {
          margin: 5px 10px;
          letter-spacing: 2px;
          background-color: white;
          font-size: 14px;
          text-align: center;
          padding: 5px;
          cursor: pointer;
        }

<div class="container">
   <div class="tabs">
       <div id="red" class="tab">RED</div>
       <div id="blue" class="tab">BLUE</div>
       <div id="yellow" class="tab">YELLOW</div>
       <div id="green" class="tab">GREEN</div>
       <div id="cyan" class="tab">CYAN</div>
   </div>

   <div class="contents">
       <div id="red" class="content"></div>
       <div id="blue" class="content"></div>
       <div id="yellow" class="content"></div>
       <div id="green" class="content"></div>
       <div id="cyan" class="content"></div>
   </div>
  
   <div class="button">
       <div class="previous">PREV</div>
       <div class="next">NEXT</div>
   </div>
</div>

Please help me to solve this code guys. Thanks a lot.

Answer 1

For the issue that no class is selected after the end of the array, you can do this 👇

• Add a codition to check if the activeTab is at the end of the array.
• If it is, we set activeTab back to 0 and call the function tabClick and pass the activeTab in it
• If not, in else we'll do the same thing which we were doing before
• Follow the same for prev button

Code example

prev.addEventListener("click", (i) => {
  if (activeTab === 0) {
    activeTab = tabs.length - 1;
    tabClick(activeTab);
  } else {
    tabClick(activeTab - 1);
  }
});
next.addEventListener("click", (i) => {
  if (activeTab >= tabs.length - 1) {
    activeTab = 0;
    tabClick(activeTab);
  } else {
    tabClick(activeTab + 1);
  }
});

Answer 2

The only problem that you are facing is when you click on the prev or next button you have passed the argument i in tabClick function but i is not the index rather it is the property of click event.

Here's what you have done 👇

prev.addEventListener('click', (i) => tabClick(i - 1));
next.addEventListener('click', (i) => tabClick(i + 1));

Here i represents the property of click and the element you have clicked on so it does not give the index.

What you can rather do is:

• Create a global variable called activeTab and set the default to 0.
• Inside tabClick fucntion set activeTab to currentTab as activeTab = currentTab
• Now, inside prev function write tabClick(actie - 1)
• Follow the same for next function.

Here's my code 👇

//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
    let tabs = document.querySelectorAll('.tab');
    let content = document.querySelectorAll('.content');
    let prev = document.querySelector('.previous');
    let next = document.querySelector('.next');
    let firstTab = function(tabs) {tabs.classList.add('tab-active')};
    let firstContent = function(content) {content.classList.add('content-active')};

    let actieTab = 0;
  
    firstTab(tabs[0]);
    firstContent(content[0]);
        
        for (let i = 0; i < tabs.length; i++) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        prev.addEventListener('click', () => tabClick(activeTab - 1));
        next.addEventListener('click', () => tabClick(activeTab + 1));

        
        function tabClick(currentTab) {
          removeActive();
            //Add Active Class
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
            activeTab = currentTab
        }  
        function removeActive() {
          for (let i = 0; i < tabs.length; i++) {
            //Remove Active Class
            content[i].classList.remove('content-active');
            content[i].classList.add('content-show');
            setTimeout(function() {
              content[i].classList.remove('content-show');
            },1500);
            tabs[i].classList.remove('tab-active');
          }
         }
       })