Как реализовать текстовой слайдер на js?
то что выделен красным это активный элемент
let projectTitles = Array.from(document.querySelectorAll('.projects__titles > p'));
let titlesDisplay = document.getElementsByClassName('projects__titles')[0];
projectTitles.reverse().forEach((item, index) => {
if(index != projectTitles.length - 1){
titlesDisplay.insertBefore(item.cloneNode(true), titlesDisplay.firstChild)
}
})
function prevNext(numb){
let titles = Array.from(document.querySelectorAll('.projects__titles > p'));
console.log(titles);
}
.projects__titles{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
border: 1px solid #000;
padding: 15px;
}
.projects__titles p {
border: 1px solid #000;
padding: 5px;
}
<div class="projects__slider container">
<div class="projects__titles">
<p>второй</p>
<p>третий</p>
<p>четвертый</p>
<p>пятый</p>
<p>шестой</p>
<p>первый</p>
</div>
<button onclick="prevNext(-1)">-</button>
<button onclick="prevNext(1)">+</button>
</div>
