texi rv texi rv - 30 days ago 9
AngularJS Question

sliding the tabs with left and right


  • 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 Source

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