Javascript-форум - как сделать вперед, назад в табах?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - как сделать вперед, назад в табах? (https://javascript.ru/forum/jquery/68376-kak-sdelat-vpered-nazad-v-tabakh.html)

как сделать вперед, назад в табах?

Привет, кто знает как сделать в табах Вперед назад?
Например есть код..

$(document).ready(function() { 

	(function ($) { 
		$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
		
		$('.tab ul.tabs li a').click(function (g) { 
			var tab = $(this).closest('.tab'), 
				index = $(this).closest('li').index();
			
			tab.find('ul.tabs > li').removeClass('current');
			$(this).closest('li').addClass('current');
			
			tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
			tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
			
			g.preventDefault();
		} );

	})(jQuery);

});

<div class="tab">

	<ul class="tabs">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
	</ul> <!-- / tabs -->

	<div class="tab_content">
		<div class="tabs_item">
			<button>Назад</button>
			<p>Контент</p>
			<button>Вперед</button>
		</div>
		<div class="tabs_item">
			<button>Назад</button>
			<p>Контент</p>
			<button>Вперед</button>
		</div>
		<div class="tabs_item">
			<button>Назад</button>
			<p>Контент</p>
			<button>Вперед</button>
		</div>
	</div>
</div>

dezytube,
нужен индекс, функция которая меняет индекс, и функция показа слайда согласно индексу, любой нормальный слайдер сделан по этой схеме.

http://javascript.ru/forum/dom-windo...tml#post445670

Мозги вообще не варят как это сделать ((

Подскажите как сделать
В благодарность заплачу

dezytube,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .current{
     background-color: hsla(25, 75%, 47%, 1);
  }
  .tabs_item:nth-child(n+2){
     display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var index = 0,
        li = $(".tabs li"),
        tab = $(".tabs_item"),
        len = li.length;

    function setIndex(x, add) {
        return function(event) {
            event.preventDefault();
            index = add ? index + x : x;
            index = limit(index);
            show()
        }
    }

    function limit(num) {
        if (num >= len) num = 0;
        if (num < 0) num = len - 1;
        return num
    }

    function show() {
        li.not(li.eq(index).addClass("current")).removeClass("current");
        tab.stop().not(tab.eq(index).slideDown()).slideUp()
    }
    li.each(function(indx, el) {
        $(el).on("click", setIndex(indx));
        var button = $("button", tab[indx]);
        button.first().on("click", setIndex(-1, true));
        button.last().on("click", setIndex(1, true))
    })
});
  </script>
</head>

<body>
<div class="tab">

  <ul class="tabs">
    <li class="current"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul> <!-- / tabs -->

  <div class="tab_content">
    <div class="tabs_item">
      <button>Назад</button>
      <p>Контент1</p>
      <button>Вперед</button>
    </div>
    <div class="tabs_item">
      <button>Назад</button>
      <p>Контент2</p>
      <button>Вперед</button>
    </div>
    <div class="tabs_item">
      <button>Назад</button>
      <p>Контент3</p>
      <button>Вперед</button>
    </div>
  </div>
</div>


</body>
</html>

Большое спасибо написал вам в Лс.