用左右滑动标签

Question

• I am new to js and jquery.
• I have tabs code in that i included left and right arrow.
• If I select right arrow it show move to next tab with smooth slide.
• If I select left arrow it show move to next tab with smooth slide.
• even the tab contents should change.
• can you guys tell me how to fix it.
• providing my code below.

https://codepen.io/texirv/pen/MvXZQX?editors=1111

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}



  $('.left').click(function(){

    console.log("I am testing");

  })

Answer 1

You will need to find the current active tab and click on the next/prev tab based on the button clicked.

Here is an example of the code you can use:

  $('.left').click(function(){
    move('left');
  })
  $('.right').click(function(){
    move('right');
  })
  function move(to) {
    var current = $('li.current').index();
    var total = $('.tabs .tab-link').length;
    var add;
    switch (to) {
      case 'left':
        add = -1;
        break;
      case 'right':
        add = 1;
        break;
    }
    $('.tabs li.tab-link').eq((current+add)%total).click();
  }

This is the update based on your codepen:
https://codepen.io/anon/pen/XaYGRM