Classe JS para trabalhar com slider.

slider.js

function Slider( containerSlider ){
	this.container 		= document.querySelector( containerSlider );
	this.botoesSlider	= this.container.querySelectorAll( '.slider-navegacao-botao' );
	this.tagImagem 		= this.container.querySelector( '.slider-imagem' );
	this.listaImagens 	= this.tagImagem.attributes['data-images'].value.split(',');
	this.areaClicavelImagem	= this.container.querySelector( '.area-clicavel-imagem' );
	this.botaoRetroceder 	= this.areaClicavelImagem.querySelector( '.botao-retroceder' );
	this.botaoAvancar 	= this.areaClicavelImagem.querySelector( '.botao-avancar' );
	this.posicaoSlider 	= 0;
	this.quantidade 	= this.listaImagens.length;
};

// imagem
Slider.prototype.preCarregarImagem = function(imagens, callback ){
	var self 			= this;
	var novaImagem 		= new Image();
	var urlNovaImagem 	= imagens.shift();

	Helper.adicionarEvento( novaImagem, 'load', function(){
		if ( imagens.length > 0 ) {
			self.preCarregarImagem(imagens, function(){});
		}
	});

	novaImagem.src = urlNovaImagem;
};

Slider.prototype.preCarregarImagens = function(){
	var self 	= this;
	var imagens = Helper.clonarArray( self.listaImagens );

	self.preCarregarImagem(imagens);
};

Slider.prototype.carregarImagem = function( posicao, callback ){
	var self 			= this;
	var urlNovaImagem 	= self.listaImagens[posicao];
	var novaImagem 		= new Image();
	
	Helper.adicionarEvento( novaImagem, 'load', function(){
		callback( urlNovaImagem );
	});

	novaImagem.src = urlNovaImagem;
};

Slider.prototype.mostrarImagem = function( urlImagem ){
	var self = this;

	self.tagImagem.src = urlImagem;
};

Slider.prototype.trocarImagem = function( posicao ){
	var self = this;

	self.carregarImagem(posicao, function( urlImagem ){
		self.mostrarImagem( urlImagem );
	});
};

// botao
Slider.prototype.ativarBotao = function( posicao, callback ){
	var self = this;
	var botao = self.botoesSlider[posicao];
	
	Helper.adicionarClasseCSS( botao, 'slider-navegacao-botao-selecionado' );
	botao.attributes['data-selecionado'].value = true;
};

Slider.prototype.desativarBotao = function( posicao ){
	var self = this;
	var botao = self.botoesSlider[posicao];

	Helper.removerClasseCSS( botao, 'slider-navegacao-botao-selecionado' );
	botao.attributes['data-selecionado'].value = false;
};

Slider.prototype.desativarBotoes = function( callback ){
	var self = this;

	for ( var i = 0 ; i < self.quantidade ; i++ ) {
		self.desativarBotao( i );
	}

	callback();
};

Slider.prototype.trocarBotaoSlider = function( posicao ){
	var self = this;

	self.desativarBotoes(function(){
		self.ativarBotao( posicao );
	});
};

// posicao
Slider.prototype.setarPosicao = function( posicao ){
	var self = this;

	self.posicaoSlider = posicao;
};

Slider.prototype.recuperarProximaPosicao = function(){
	var self 		= this;
	var maxLength 		= (self.quantidade - 1);
	var proximaPosicao 	= self.posicaoSlider + 1;
	
	var novaPosicao = proximaPosicao > maxLength ? maxLength : proximaPosicao;

	return Number( novaPosicao );
};

Slider.prototype.recuperarPosicaoAnterior = function(){
	var self 		= this;
	var posicaoAnterior 	= (self.posicaoSlider - 1);
	var minLength 		= 0;

	var novaPosicao = posicaoAnterior < minLength ? minLength : posicaoAnterior;
	
	return Number( novaPosicao );
};

// eventos
Slider.prototype.adicionarEventosBotoesSlider = function( callback ){
	var self = this;

	for (var i = 0 ; i < self.quantidade ; i++) {
		var botao =  self.botoesSlider[i];
		
		Helper.adicionarEvento(botao, 'click', function( botao ){
			var posicao = Number( botao.attributes['data-posicao'].value );
			
			self.desativarBotoes(function(){
				self.ativarBotao( posicao );
			});

			self.trocarImagem( posicao );
		});
	}

	callback();
};

Slider.prototype.adicionarEventosNavegacao = function( callback ){
	var self = this;

	Helper.adicionarEvento( self.botaoAvancar, 'click', function(){
		self.avancar(function( ultimaPosicaoAtingida ){
			callback( 'ultimaPosicaoAtingida' );
		});
	});

	Helper.adicionarEvento( self.botaoRetroceder, 'click', function(){
		self.retroceder(function( primeiraPosicaoAtingida ){
			callback( 'primeiraPosicaoAtingida' );
		});
	});
};

Slider.prototype.adicionarEventosSlider = function( callback ){
	var self = this;
	
	self.adicionarEventosBotoesSlider(function(){
		// callback
	});

	self.adicionarEventosNavegacao(function( posicaoLimiteAtingida ){
		callback( posicaoLimiteAtingida );
	});
};

Slider.prototype.posicaoLimiteAtingida = function( posicaoAtual, posicaoLimite ){
	return posicaoAtual === posicaoLimite ? true : false;
};

// navegacao
Slider.prototype.avancar = function( callback ){
	var self 			= this;
	var posicaoAtual 		= self.posicaoSlider;
	var posicaoLimite 		= (self.quantidade - 1);
	var atingiuPosicaoLimite 	= self.posicaoLimiteAtingida( posicaoAtual, posicaoLimite );
	var novaPosicao 		= self.recuperarProximaPosicao();

	if ( atingiuPosicaoLimite ) {
		callback( atingiuPosicaoLimite );
	} else {
		self.trocarImagem( novaPosicao );
		self.trocarBotaoSlider( novaPosicao );
		self.setarPosicao( novaPosicao );
	}
};

Slider.prototype.retroceder = function( callback ){
	var self 			= this;
	var posicaoAtual 		= self.posicaoSlider;
	var posicaoLimite 		= 0;
	var atingiuPosicaoLimite 	= self.posicaoLimiteAtingida( posicaoAtual, posicaoLimite );
	var novaPosicao 		= self.recuperarPosicaoAnterior();

	if ( atingiuPosicaoLimite ) {
		callback( atingiuPosicaoLimite );
	} else {
		self.trocarImagem( novaPosicao );
		self.trocarBotaoSlider( novaPosicao );
		self.setarPosicao( novaPosicao );
	}
};

Slider.prototype.resetar = function(){
	var self = this;

	self.trocarImagem( 0 );
	self.trocarBotaoSlider( 0 );
	self.setarPosicao( 0 );
};

// init
Slider.prototype.init = function( callback ){
	var self = this;

	self.adicionarEventosSlider( function( posicaoLimiteAtingida ){
		callback( posicaoLimiteAtingida );
	});
};