<section class="theme-width">
			<article class="pic-text-slide">
				<p>Sibling 1</p>
			</article>
			<article class="pic-text-slide none">
				<p>Sibling 2</p>
			</article>
			<article class="pic-text-slide none">
				<p>Sibling 3</p>
			</article>
			<article class="pic-text-slide none">
				<p>Sibling 4</p>
			</article>
			<button class="previous">Previous</button>
			<button class="next">Next</button>
		</section>	
.none {
	display: none;
}
.theme-width button {
	text-align: center;
	margin: auto;
}
const nextClick = document.querySelector(".next");
nextClick.addEventListener('click', event => {
	var traverse = nextClick.parentElement.querySelector("article:not(.none)");
	var nSibling = traverse.nextElementSibling;
	if (nSibling.classList.contains("pic-text-slide")) {
		nSibling.classList.remove("none");
	traverse.classList.add("none");		
	}
});

const previousClick = document.querySelector(".previous");
previousClick.addEventListener('click', event => {
	var traverse = previousClick.parentElement.querySelector("article:not(.none)");
	var pSibling = traverse.previousElementSibling;
	if (pSibling.classList.contains("pic-text-slide")) {
		pSibling.classList.remove("none");
		traverse.classList.add("none");	
	}
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.