Как реализовать текстовой слайдер на 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>


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