On debut mode code is working properly but on Proper run code run once and stop
const leftArrow = document.querySelector('.arrow-left');
const rightArrow = document.querySelector('.arrow-right');
const tabsWrapper = document.querySelector('.tabs-wrapper');
const tabs = document.querySelector('.tabs');
for (var i = 0; i < tabs.childElementCount; i++) {
if (tabs.children[i].className != "Active") {
tabsWrapper.scrollBy({
left: 200, // Scroll right by 200px
behavior: 'smooth'
});
}
else {
break;
}
}
<div class="tabs-wrapper">
<ul id="Custom-large-tabs" class="nav nav-tabs tabs">
<li class="tab active"><a id="aMain" data-target="#home" (click)="invalidateMain()" data-toggle="tab">Main </a></li>
<li ><a id="aFunding" data-target="#futureFunding" (click)="showfutureFundingGD()" data-toggle="tab">Funding </a></li>
<li ><a id="aLiability" data-target="#LiabilityTab" (click)="invalidateLiabilitiesTab()" data-toggle="tab">Liabilities </a></li>
<li ><a id="aAdjustedTotalCommitment" data-target="#DealAdjustedtotalCommitment" (click)="invalidateDealAdjustedTab()" data-toggle="tab">Commitment </a></li>
<li><a id="aReservetab" data-target="#reserveTab" (click)="invalidateReserveTab()" data-toggle="tab">Reserves </a></li>
<li ><a id="aFeeInvoicetab" data-target="#FeeInvoicetab" (click)="invalidateFeeInvoicetab()" data-toggle="tab">Invoices </a></li>
<li><a id="aDealAmorttab" data-target="#DealAmorttab" (click)="invalidateDealAmorttab()" data-toggle="tab">Amort </a></li>
<li><a id="aNotepayrule" data-target="#notepayrule" (click)="shownotepayruleGD()" data-toggle="tab">Payrules </a></li>
<li><a id="aMaturitytab" data-target="#Maturitytab" (click)="invalidateMaturitytab()" data-toggle="tab">Maturity </a></li>
<li><a id="aAccountingtab" data-target="#AccountingClose" (click)="invalidateAccountingClose()" data-toggle="tab">Accounting Close</li>
<li><a id="aServicingWatchlisttab" data-target="#ServicingWatchlist" (click)="invalidateServicingWatchlist()" data-toggle="tab">Distressed </a></li>
<li><a id="aXIRRTab" data-target="#XIRRTab" (click)="GetXIRROutputByObjectID()" data-toggle="tab">XIRR</a></li>
<li><a id="aPrepaymentPremiumtab" (click)="GetAllFeeType()" data-target="#PrepaymentPremiumtab" data-toggle="tab">Prepayment Premium </a></li>
<li><a id="aRulestab" data-target="#Rulestab" (click)="invalidateRulestab()" data-toggle="tab">Rules </a></li>
<li><a id="aPayOff" data-target="#Payofftab" (click)="getPayoffData()" data-toggle="tab">Payoff </a></li>
<li><a id="aImport" data-target="#docImport" (click)="showDocImport()" data-toggle="tab">Documents </a></li>
<li ><a id="aActivitytab" data-target="#Activitytab" (click)="getDealActivity()" data-toggle="tab">Activity</a></li>
</ul>
</div>I am having multiple tabs and auto slide according to condition