@astrodeep

Как добавить в табы next и prev?

Добрый день имеется вот такой слайдер на js, подскажите как добавить стрелки след. пред.? В идеале конечно еще добавить чтоб прокручивались по таймеру, спасибо.
<!-- Общий контейнер для табов -->
<div class="tabs">
   
   <!--  Контейнер с вкладками   -->
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger active" data-tab="1">Первая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="2">Вторая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="3">Третья</li>
   </ul>
   
   <!--  Контейнер с блоками, которые содержат контент вкладок   -->
   <ul class="tab-content">
      <li class="tab-content__item js-tab-content active" data-tab="1">
         Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.
      </li>
      <li class="tab-content__item js-tab-content" data-tab="2">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?
      </li>
      <li class="tab-content__item js-tab-content" data-tab="3">
         Далеко-далеко за словесными горами.
      </li>
   </ul>
</div>

.tabs {
   width: 100%;
   max-width: 500px;
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

/* Стили для вкладки */
.tab-header__item {
   padding: 10px 20px;
   margin-right: 5px;
   cursor: pointer;
   border: 1px solid #ddd;
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: red;
   border-bottom: none;
   position: relative;
   background-color: #fff;
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */
.tab-content__item {
   display: none;
   padding: 20px;
   border: 1px solid #ddd;
   margin-top: -1px;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}

var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
    jsContents = document.querySelectorAll('.js-tab-content');

jsTriggers.forEach(function(trigger) {
   trigger.addEventListener('click', function() {
      var id = this.getAttribute('data-tab'),
          content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'),
          activeTrigger = document.querySelector('.js-tab-trigger.active'),
          activeContent = document.querySelector('.js-tab-content.active');
      
      activeTrigger.classList.remove('active'); // 1
      trigger.classList.add('active'); // 2
      
      activeContent.classList.remove('active'); // 3
      content.classList.add('active'); // 4
   });
});
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
@medin84
software developer
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы