Добрый день имеется вот такой слайдер на 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
});
});
