WesleiRamos · August 5, 2018 18:01
diff --git a/slide.html b/slide.html
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
 	<meta charset="utf-8">
 	<title>slide exemplo</title>
 	<style>
 		/* reseta o padding e margin, sempre faço isso **/
 		* { padding: 0; margin: 0; }
 		
 		/* apenas para deixar os elementos centralizados **/
 		body {
 			display: flex;
 			justify-content: center;
 			overflow: hidden;
 		}

 		.slide {
 			/* apenas pra mostrar os limites*/
 			border: 1px solid red;
 			height: 150px;
 			/* descomente o overflow e veja o que acontece */
 			/*overflow: hidden;*/
 			width: 200px;
 			white-space: nowrap;
 		}

 		.slide__elemento {
 			/* alinhar verticalmente */
 			align-items: center;
 			border: 1px solid gray;
 			/*
 				inline-flex pra deixar o texto centralizado,
 				mas você pode trocar pra inline-block da na mesma
 			*/
 			display: inline-flex;
 			height: 100%;
 			/* alinhar horizontalmente */
 			justify-content: center;
 			margin: 0 0;
 			transition: 0.5s;
 			width: 100%;
 		}

 		.slide__elemento:not(:first-child) {
 			margin-left: -4px;
 		}
 	</style>
 </head>
 <body>
 	<div>
 		<div class="slide">
 			<div class="slide__elemento">1</div>
 			<div class="slide__elemento">2</div>
 			<div class="slide__elemento">3</div>
 			<div class="slide__elemento">4</div>
 			<div class="slide__elemento">5</div>
 			<div class="slide__elemento">6</div>
 			<div class="slide__elemento">7</div>
 			<div class="slide__elemento">8</div>
 			<div class="slide__elemento">9</div>
 		</div>

 		<div style="margin-top: 20px">
 			<button onclick="anterior()"><</button>
 			<button onclick="proximo()">></button>
 		</div>
 	</div>

 	<script type="text/javascript">
 		/**
 		 *	Guardaremos qual elemento está sendo mostrado, a quantidade de elementos
 		 *	a largura do "conteiner" do slide e o primeiro elemento que
 		 *	será movimentado pra esquerda ou direita conforme o comando de avançar e voltar
 		 */
 		let elementoMostrado,
 			quantidadeDeElementos,
 			larguraDosElementos,
 			primeiroElemento;

 		function proximo() {
 			/*
 			 *	Faz com que não avance caso não tenha mais nenhum pra avançar
 			 */
 			if (elementoMostrado === (quantidadeDeElementos - 2) * -1) return;
 			elementoMostrado--;
 			movimentar();
 		}

 		function anterior() {
 			/*
 			 *	Faz com que não volte caso não tenha mais nenhum pra voltar
 			 */
 			if (elementoMostrado === 1) return;
 			elementoMostrado++;
 			movimentar();
 		}

 		function movimentar() {
 			/**
 			 *	Vamos "empurrar" ou "puxar" o primeiro elemento na horizontal
 			 *	para que o elemento da vez seja mostrado, por exemplo
 			 *	se quisermos mostrar o 3 elemento então temos que mover o primeiro elemento
 			 *	pra esquerda 2 * a largura dos elementos
 			 */
 			let novoMarginLeft = (elementoMostrado - 1) * larguraDosElementos;
 			primeiroElemento.style.marginLeft = novoMarginLeft.toString() + 'px';
 		}

 		window.addEventListener('load', function() {
 			elementoMostrado = 1,
 			quantidadeDeElementos = document.querySelectorAll('.slide__elemento').length,
 			larguraDosElementos = 202,
 			primeiroElemento = document.querySelector('.slide__elemento:first-child');
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="utf-8">
	<title>slide exemplo</title>
	<style>
	/* reseta o padding e margin, sempre faço isso **/
	* { padding: 0; margin: 0; }

	/* apenas para deixar os elementos centralizados **/
	body {
	display: flex;
	justify-content: center;
	overflow: hidden;
	}

	.slide {
	/* apenas pra mostrar os limites*/
	border: 1px solid red;
	height: 150px;
	/* descomente o overflow e veja o que acontece */
	/overflow: hidden;/
	width: 200px;
	white-space: nowrap;
	}

	.slide__elemento {
	/* alinhar verticalmente */
	align-items: center;
	border: 1px solid gray;
	/*
	inline-flex pra deixar o texto centralizado,
	mas você pode trocar pra inline-block da na mesma
	*/
	display: inline-flex;
	height: 100%;
	/* alinhar horizontalmente */
	justify-content: center;
	margin: 0 0;
	transition: 0.5s;
	width: 100%;
	}

	.slide__elemento:not(:first-child) {
	margin-left: -4px;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="slide">
	<div class="slide__elemento">1</div>
	<div class="slide__elemento">2</div>
	<div class="slide__elemento">3</div>
	<div class="slide__elemento">4</div>
	<div class="slide__elemento">5</div>
	<div class="slide__elemento">6</div>
	<div class="slide__elemento">7</div>
	<div class="slide__elemento">8</div>
	<div class="slide__elemento">9</div>
	</div>

	<div style="margin-top: 20px">
	<button onclick="anterior()"><</button>
	<button onclick="proximo()">></button>
	</div>
	</div>

	<script type="text/javascript">
	/**
	* Guardaremos qual elemento está sendo mostrado, a quantidade de elementos
	* a largura do "conteiner" do slide e o primeiro elemento que
	* será movimentado pra esquerda ou direita conforme o comando de avançar e voltar
	*/
	let elementoMostrado,
	quantidadeDeElementos,
	larguraDosElementos,
	primeiroElemento;

	function proximo() {
	/*
	* Faz com que não avance caso não tenha mais nenhum pra avançar
	*/
	if (elementoMostrado === (quantidadeDeElementos - 2) * -1) return;
	elementoMostrado--;
	movimentar();
	}

	function anterior() {
	/*
	* Faz com que não volte caso não tenha mais nenhum pra voltar
	*/
	if (elementoMostrado === 1) return;
	elementoMostrado++;
	movimentar();
	}

	function movimentar() {
	/**
	* Vamos "empurrar" ou "puxar" o primeiro elemento na horizontal
	* para que o elemento da vez seja mostrado, por exemplo
	* se quisermos mostrar o 3 elemento então temos que mover o primeiro elemento
	* pra esquerda 2 * a largura dos elementos
	*/
	let novoMarginLeft = (elementoMostrado - 1) * larguraDosElementos;
	primeiroElemento.style.marginLeft = novoMarginLeft.toString() + 'px';
	}

	window.addEventListener('load', function() {
	elementoMostrado = 1,
	quantidadeDeElementos = document.querySelectorAll('.slide__elemento').length,
	larguraDosElementos = 202,
	primeiroElemento = document.querySelector('.slide__elemento:first-child');
	});
	</script>
	</body>
	</html>