Bootstrap 5 tab-pane auto switch on Time Interval-CodePudding

I want the bootstrap 5 tab-pane to automatically switch between tabs on any setTime intervals just like in Carousel.

While the code on the given link ("Click Here") works, it is extremely old and works only for bootstrap 3. Can someone help me getting it work on Bootstrap 5?

It would be great if someone provided a working code on the following bootstrap code.

<nav>
  <div  id="nav-tab" role="tablist">
    <button  id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button  id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button  id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button  id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div  id="nav-tabContent">
  <div  id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div  id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div  id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div  id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

CodePudding user response：

Add jquery cdn and try this

  var tabs = $(".nav-tabs > button");
  var active = tabs.filter(".active");
  var next = active.next("button").length
    ? active.next("button")
    : tabs.filter(":first-child");
  next.tab("show");
};
var tabCycle = setInterval(tabChange, 2000);
$(function () {
  $(".nav-tabs button").click(function (e) {
    e.preventDefault();
    clearInterval(tabCycle);
    $(this).tab("show");
    setTimeout(function () {
      tabCycle = setInterval(tabChange, 2000);
    }, 2000);
  });
});