Бесконечное переключение табов

Question

Все привет. У меня в блоке 3 таба и дополнительная кнопка next-tab, которая переключает эти табы. Как сделать, чтобы можно было переключать бесконечно? что бы, когда доходит до последнего таба, показывался первый?

$('ul.tabs__list').on('click', 'li:not(.tabs__tab_active)', function() {
        $(this)
            .addClass('tabs__tab_active').siblings().removeClass('tabs__tab_active')
            .closest('div.tabs').find('div.tab-content').removeClass('tab-content_active').eq($(this).index()).addClass('tab-content_active');
    });
    $('.next-tab').click(function(){
        $('.tabs__list > .tabs__tab_active').next('li').trigger('click');
        
    });

Answer 1

берете индекс текущей активной и общее число вкладок. Если видите, что последняя перематываете на 0, в противном случае берете следующую.

$("#next").click(function(){  
  let idx = $(".tab.active").index();
  
  if(idx == $(".tab").length -1 ) idx = -1;   
  
  $(".tab").removeClass("active")
           .eq(++idx)
               .addClass("active");
});

.tab {
  padding: 4px 12px;  
}
.tab.active {
  background-color: #f0f0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs-list">
  <li class="tab active">1</LI>
  <li class="tab">2</LI>
  <li class="tab">3</LI>
</ul>

<button id="next">next</button>

БЛОГ НА HUSL

Бесконечное переключение табов

Ответы (1 шт):