Next-Previous button to work in loop using Bootstrap Tab

by Guruprasad Rao

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
    <ul id="wheel-tab" class="nav nav-tabs nav-justified">
        <li class="active"><a href="#ocean" data-toggle="tab">Ocean</a></li>
        <li><a href="#air" data-toggle="tab">Air</a></li>
        <li><a href="#customs" data-toggle="tab">Customs</a></li>
        <li><a href="#transport" data-toggle="tab">Transport</a></li>
    </ul>
    <div class="tab-content">
        <div id="ocean" class="tab-pane fade in active">
            <h2>Ocean</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="air" class="tab-pane fade in active">
            <h2>Air</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="customs" class="tab-pane fade in active">
            <h2>Customs</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="transport" class="tab-pane fade in active">
            <h2>Transport</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <a class="left carousel-control" href="#" id="wheel-left" role="button" data-slide="prev">
        <span class="icon icon-left">Prev</span>
    </a>
    <a class="right carousel-control" href="#" id="wheel-right" role="button" data-slide="prev">
        <span class="icon icon-right">Next</span>
    </a>
</div>

JavaScript

var $tabs = $('#wheel-tab li');

$('#wheel-left').on('click', function() {
    var prevLen = $tabs.filter('.active').prev('li').length;
    if (prevLen)
        $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
    else
        $tabs.filter('li:last').find('a[data-toggle="tab"]').tab('show');
});

$('#wheel-right').on('click', function() {
    var nextLen = $tabs.filter('.active').next('li').length;
    if (nextLen)
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
    else
        $tabs.filter('li:first').find('a[data-toggle="tab"]').tab('show');

});