Bootstrap 5 选项卡窗格自动切换时间间隔

Question

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 class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" 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 class="nav-link" 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 class="nav-link" 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 class="nav-link" 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 class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Answer 1

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);
  });
});