Slide DIV em JQUERY sem plugin

[s3c0 0]

Olá amigos,

 

estou tentando fazer um slide com JQUERY de troca de DIV, porém não estou conseguindo sem uso de plugins.

 

A ideia seria a hora que abrir o modal, mostrar as "Colunas" 1 e 2, e com o tempo mudar para 3 e 4 em loop infinito.

Coloquei 2 "botões" somente para ir testando o código, porém não consegui realizar o slide corretamente.

 

Alguém teria alguma sugestão?

 

<div class="modal_banner">
	<a class="fechar_modal" onclick="javascript:close_modal_banner();"><svg aria-hidden="true" focusable="false" data-prefix="fas" id="btn_modal" width="30" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></a>
	<div class="topo_modal">
	<span id="logo_modal"><img src="logo.png" width="150px"></span>
	<span id="texto_topo"><p>texto</p><span></div>
	<div style="top: 50%;left: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="seguinte" onclick="esquerda();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg></a></div>
	<div class="corpo_modal_banner">
		<div class="product-item">
			<div class="products-row" style="">
					<div class="coluna" >1</div>
			</div>
			<div class="products-row" style="">
					<div class="coluna" >2</div>
			</div>
			<div class="products-row" style="">
					<div class="coluna">3</div>
			</div>
			<div class="products-row" style="">
					<div class="coluna">4</div>
			</div>
	<div style="top: 50%;right: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="anterior" onclick="direita();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></a></div>
		</div>
	</div>
</div>

function esquerda(){
			$('.products-row').hide("slide", { direction: "left" }, 500);
	};

	function direita(){
			$('.products-row').hide("slide", { direction: "right" }, 500);
	};

 

Agradeço a atenção de todos!