Помогите улучшить табы

132

24 марта 2019, 14:10

$(".tab_item").not(":first").hide();
$(".top_phone .wrapper .tab").click(function() {
  $(".top_phone .wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
  $(".top_phone .tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top_phone">
  <div class="wrapper">
      <div class="tabs">
          <span class="tab">Контактная барная стойка</span>/
          <span class="tab">Круглосуточная кухня</span>
      </div>
      <div class="tab_content">
          <div class="tab_item">
            <p class="tab_item-text">
              накормим вас в любое время дня и ночи
              <img src="img/tab-img.png" alt="">
            </p>
        </div>
           <div class="tab_item">
            <p class="tab_item-text">
              кухня
              <img src="img/tab-img.png" alt="">
            </p>
        </div>
      </div>
  </div>
</div>

Answer 1

Вам нужно использовать setInterval, будет что то вроде

$(document).ready(function() {
  setInterval(function() {
    // Здесь в зависимости от потребностей пишем переключение
    // Если таба два, то можно определять тот который неактивный, убирать класс .active и добавлять к неактивному
    // Если табов больше 2, то можно использовать .eq($(this).index())
  }, 3000)
})

Возможно вам это все не надо и будет удобнее воспользоваться слайдером, например bxslider или любым другим где в слайды можно сделать из текста и прочих элементов.