Navigation dans le carrousel pour les onglets jQuery

Question

Je dois ajouter une navigation précédente/suivante (sous forme de carrousel) à mes onglets jQuery mais je ne sais pas comment y parvenir. Voici ce que j'ai jusqu'à présent:

Javascript

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('ul.tabs li').click(function(){ 
      var tab_id = $(this).attr('data-tab'); 
      $('ul.tabs li').removeClass('current'); 
      $('.tab-content').removeClass('current'); 
      $(this).addClass('current'); 
      $("#"+tab_id).addClass('current'); 
      }); 
     }); 
    </script> 

HTML

<div class="tabs"> 
    <button id="next-left"> <- </button> 
    <button id="next-right"> -> </button> 
    <ul class="tabs"> 
     <li class="tab-link current" data-tab="tab-1">One</li> 
     <li class="tab-link" data-tab="tab-2">Two</li> 
     <li class="tab-link" data-tab="tab-3">Three</li> 
    </ul> 
    <div id="tab-1" class="tab-content current"> 
     content 1 
    </div> 
    <div id="tab-2" class="tab-content"> 
     content 2 
    </div> 
    <div id="tab-3" class="tab-content"> 
     content 3 
    </div>    
</div> 

JSFiddle link

Answer 1

Si je vous ai bien, vous voulez que tous les onglets soient sur la même ligne à la navigation -arrows pour glisser à gauche et à droite.

Je ne pense pas qu'il y ait une pur solution jQuery UI, mais ce poste peut-être sur le même sujet: How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Answer 2

d'accord, je résolu le problème, mais il est un trop mélange de javascript et jquery maintenant Je pense (ma jquery n'est pas si bonne ...) alors peut-être que quelqu'un peut me montrer un code (nettoyeur) jquery-only-code?

html:

<div class="tabs"> 
    <button class="tab_nav" id="next_left"> <- </button> 
    <button class="tab_nav" id="next_right"> -> </button> 
    <ul class="tabs"> 
     <li class="tab-link current" id="link-1" data-tab="tab-1">One</li> 
     <li class="tab-link" id="link-2" data-tab="tab-2">Two</li> 
     <li class="tab-link" id="link-3" data-tab="tab-3">Three</li> 
    </ul> 
    <div id="tab-1" class="tab-content current"> 
     content 1 
    </div> 
    <div id="tab-2" class="tab-content"> 
     content 2 
    </div> 
    <div id="tab-3" class="tab-content"> 
     content 3 
    </div>    
</div> 

JS:

$(document).ready(function(){ 
    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }); 
}); 

$(document).ready(function(){ 
    $('.tab_nav').click(function(){ 
     if(this.id == 'next_left') { 
      $d = 'l'; 
     } 
     if(this.id == 'next_right') { 
      $d = 'r'; 
     } 
     $max = document.getElementsByClassName('tab-link').length; 
     $currentlink = document.getElementsByClassName('current')[0].id; 
     $arraylink = $currentlink.split('-'); 
     $curlink = $arraylink[1]; 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     if ($d == 'l') { 
      if ($curlink == 1) { 
       $link = "#link-"+ $max; 
       $tab = "#tab-"+ $max; 
      } 
      else { 
       $link = "#link-" + ($curlink-1); 
       $tab = "#tab-" + ($curlink-1); 
      } 
     } 
     else if ($d == 'r') { 
      if ($curlink == $max) { 
       $link = "#link-1"; 
       $tab = "#tab-1"; 
      } 
      else { 
       $link = "#link-" + (parseInt($curlink)+1); 
       $tab = "#tab-" + (parseInt($curlink)+1); 
      } 
     } 
     $($link).addClass('current'); 
     $($tab).addClass('current'); 
    }); 
});