Tab content with next & privious options - php

Question

<script src="http://tympanus.net/Development/TabStylesInspiration/js/modernizr.custom.js"></script>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css" rel="stylesheet"/>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css" rel="stylesheet"/>
<section>
<div class="tabs tabs-style-line">
<div class="content-wrap">
<a href="javascript(0);" class="prev">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript(0);" class="next">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) {
new CBPFWTabs(el);
});
})();
</script>
Tab Styles Inspiration
Tab content work fine but how to add next previous option on this
inspiration.

Answer 1

check this solution:
http://jsfiddle.net/bpzat7r0/3/
Pay attention to add ID attribute for div (.tabs) and nav link (.prev and .next)
HTML:
<section>
<div class="tabs tabs-style-line" id="tab1">
<div class="content-wrap">
<a href="javascript:" class="prev" id="prev1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript:" class="next" id="next1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
JAVASCRIPT EDIT:
var $t=new CBPFWTabs(document.getElementById( 'tab1' ) )
document.getElementById('prev1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current--;
if(current<0) current=count-1;
$t._show(current);
};
document.getElementById('next1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current++;
if(current>=count) current=0;
$t._show(current);
};