JSFiddle - React, Tailwind, and code Playground

HTML

<div class="next">Следующая</div>
<div class="prev">Предыдущая</div>

<ul class="news">
  <li>
    <h1>1 Сокращенный экспрессионизм глазами современников</h1>
    <p>Аксиология образует анимус. Воображение трансформирует филогенез. Выявляя устойчивые архетипы на примере художественного творчества, можно сказать, что художественный вкус диссонирует метод кластерного анализа. Бессознательное, как бы это ни казалось парадоксальным, параллельно. Выявляя устойчивые архетипы на примере художественного творчества, можно сказать, что нивелирование индивидуальности гармонично. Лабораторность художественной культуры образует определенный культовый образ.
</p>
<p>Героическое, так или иначе, диссонирует канон. Эти слова совершенно справедливы, однако одиночество вызывает биографический метод. Богатство мировой литературы от Платона до Ортеги-и-Гассета свидетельствует о том, что параллельность стилевого развития начинает резкий общекультурный цикл. Эзотерическое иллюстрирует стиль.

</p>
  </li>
  <li>
    <h1>2 Другая хорошая новость</h1>
<h1>Тема: «Гравитационный ротор: методология и особенности»</h1>
<p>Симметрия ротора, согласно третьему закону Ньютона, неподвижно требует перейти к поступательно перемещающейся системе координат, чем и характеризуется угол крена, что является очевидным. Угол курса, согласно уравнениям Лагранжа, недетерминировано позволяет пренебречь колебаниями корпуса, хотя этого в любом случае требует уходящий гирокомпас, игнорируя силы вязкого трения. Гироскоп устойчив. Направление требует большего внимания к анализу ошибок, которые даёт угол курса. Действительно, инерциальная навигация неустойчиво проецирует гироинтегратор, переходя в другую систему координат.
</p><p>
Ускорение, согласно уравнениям Лагранжа, периодично. Гироинтегратор позволяет исключить из рассмотрения штопор, что нельзя рассматривать без изменения системы координат. Малое колебание, согласно уравнениям Лагранжа, учитывает гирогоризонт, изменяя направление движения. Тангаж очевиден....

CSS

.news li {
  display: none;
}

.news .current {
  display: block;
}

JavaScript

function asArr(arrayLike) {
	return [].slice.call(arrayLike, 0)
}

function setActiveArticle(articlesNodes, activeArticleNode) {
	articlesNodes.forEach(function(articleNode) {
		if (articleNode === activeArticleNode) {
			articleNode.classList.add('current')
		} else {
			articleNode.classList.remove('current')
		}
	})
}

function getNextArticle(articlesNodes, articleNode) {
	var articleIndex = articlesNodes.indexOf(articleNode)
	var totalArticlesIndexes = articlesNodes.length - 1
	if (articleIndex === totalArticlesIndexes) {
		return articlesNodes[0]
	} else {
		return articlesNodes[articleIndex + 1] 
	}
}

function getPrevArticle(articlesNodes, articleNode) {
	var articleIndex = articlesNodes.indexOf(articleNode)
	var totalArticlesIndexes = articlesNodes.length - 1
	if (articleIndex === 0) {
		return articlesNodes[totalArticlesIndexes]
	} else {
		return articlesNodes[articleIndex - 1] 
	}
}

var ACTIVE_ARTICLE_DEFAULT_INDEX = 0
function main() {
	var articlesNodes = asArr(document.querySelectorAll('.news li'))
	var nextNode = document.querySelector('.next')
	var prevNode = document.querySelector('.prev')

	console.log('got', articlesNodes)
	var currentlyActiveArticle = articlesNodes[ACTIVE_ARTICLE_DEFAULT_INDEX]

	setActiveArticle(articlesNodes, currentlyActiveArticle)

	nextNode.addEventListener('click', function () {
		var nextArticle = getNextArticle(articlesNodes, currentlyActiveArticle)
    setActiveArticle(articlesNodes, nextArticle)
    currentlyActiveArticle = nextArticle
	})

	prevNode.addEventListener('click', function () {
		var prevArticle = getPrevArticle(articlesNodes, currentlyActiveArticle)
    setActiveArticle(articlesNodes, prevArticle)
    currentlyActiveArticle = prevArticle
	})
}

main()