JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imagem-galeria">
		<img class="img-main" src="http://i62.tinypic.com/2mw9kr9.jpg" width="150px" />
		<a href="#" class="seta-esquerda">Anterior</a>
		<a href="#" class="seta-direita">Próximo</a>
	</div>

	<div class="owl-carousel-galeria">
		<div class="item change-image"><div class="square"></div><img src="http://i62.tinypic.com/2mw9kr9.jpg" width="150px" /></div>
		<div class="item change-image"><div class="square"></div><img src="http://www.imagenstop.net/wp-content/gallery/imagens-para-celular/Imagens-Bonitas-para-Facebook.jpg" width="150px" /></div>
		<div class="item change-image"><div class="square"></div><img src="http://www.mensagenscomamor.com/images/interna/new/imagens_boa_noite.jpg" width="150px" /> </div>
		<div class="item change-image"><div class="square"></div><img src="http://cdn.globorural.globo.com/planetabicho/files/2013/08/animais00.jpg" width="150px" /> </div>
	</div>

JavaScript

var indexAtual = 0;
	
		$(document).ready(function(){
		
			var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });
			
			$('.seta-direita').on('click', function(){
			
				indexAtual++;
			
				if(indexAtual >= urlsImgs.length) {
					indexAtual = 0; //se chegou ao final do array, volta para o primeiro item
				}
			
				$('.img-main').attr('src', urlsImgs[indexAtual]);
			});
			
			$('.seta-esquerda').on('click', function(){
			
				indexAtual--;
			
				if(indexAtual < 0) {
					indexAtual = (urlsImgs.length - 1); //se chegou ao começo do array, volta para o úlitmo item
				}
			
				$('.img-main').attr('src', urlsImgs[indexAtual]);
			});
		});