I’m using this js (https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5) to scroll tabs in bootstrap, on mobile devices. The problem is that i need to use them twice on the same page, so when I click on the arrows the two tabs scroll. How can i make a condition, so that only one of them scrolls?
<div class="w-100 pt-3">
<div class="scroller scroller-left float-left mt-2"><i class="fa fa-chevron-left"></i></div>
<div class="scroller scroller-right float-right mt-2"><i class="fa fa-chevron-right"></i></div>
<div class="wrapper-nav">
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
<a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public"
aria-expanded="true">Tab1</a>
<a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
<a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
<a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
<a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
<a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
<a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
<a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
<a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
<a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
<a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
<a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
<a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
<a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
<a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
<a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>
</nav>
</div>
<div class="tab-content p-3" id="myTabContent">
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab"
aria-expanded="true">
This is the content of Tab 1...
</div>
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 2...
</div>
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 3...
</div>
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 4...
</div>
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 5...
</div>
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 6...
</div>
<div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 7...
</div>
<div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 8...
</div>
<div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 9...
</div>
<div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 10...
</div>
<div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 11...
</div>
<div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 12...
</div>
<div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 13...
</div>
<div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 14...
</div>
<div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 15...
</div>
<div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab"
aria-expanded="false">
This is the content of Tab 16...
</div>
</div>
</div>
<script>
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function() {
var itemsWidth = 0;
$('.list a').each(function() {
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function() {
var ww = 0 - $('.wrapper-nav').outerWidth();
var hw = (($('.wrapper-nav').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
if (ww > hw) {
//return ww;
return (rp > ww ? rp : ww);
} else {
//return hw;
return (rp > hw ? rp : hw);
}
};
var getLeftPosi = function() {
var ww = 0 - $('.wrapper-nav').outerWidth();
var lp = $('.list').position().left;
if (ww > lp) {
return ww;
} else {
return lp;
}
};
var reAdjust = function() {
// check right pos of last nav item
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
if (($('.wrapper-nav').outerWidth()) < widthOfList() && (rp < 0)) {
$('.scroller-right').show().css('display', 'flex');
} else {
$('.scroller-right').hide();
}
if (getLeftPosi() < 0) {
$('.scroller-left').show().css('display', 'flex');
} else {
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize', function(e) {
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({
left: `+=${widthOfHidden()}px`
}, 'slow', function() {
reAdjust();
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({
left: `-=${getLeftPosi()}px`
}, 'slow', function() {
reAdjust();
});
});
</script>