Come creare uno slider di contenuti o galleria fotografica con solo JavaScript puro, senza jQuery

Come funziona lo slider o galleria di immagini JavaScript?

Questo slider, oltre a fare scorrere immagini può fare scorrere qualsiasi contenuto HTML. Lo slider è costruito a partire da un DIV genitore e dei DIV figli per ogni elemento che si vuole fare scorrere. Cosa si inserisce all'interno dei DIV figli è indifferente. Si possono creare in questo modo gallerie di immagini con JavaScript puro, commenti che scorrono o altro.

Ci sono molte impostazioni impostabili via codice per questo slider JavaScript.

• Lo slider può fare vedere un solo elemento che scorre alla volta oppure più di uno. Se più di uno, gli elementi scorreranno a gruppi di due, tre o più elementi.
• Si può fare fermare lo slider all'ultimo elemento o fare scorrere lo slider all'infitito. In questo caso lo slider continuera a ciclare con gli elementi presenti nello slider.
• Se può disabilitare la funzionalità di scrolling automatico, il che significa che al caricamento dello slider gli elementi non scorreranno fino a che l'utente non decidera di farli scorrere attraverso i bottoni presenti.

Come funziona il codice dello slider o galleria immagini con solo JavaScript?

Il codice ha tre parti l'HTML, il CSS e il JavaScript. Il codice CSS non è molto importante poichè ognuno lo può modificare a piacimento per adattarsi alle proprie neccessità. Il codice JavaScript è la parte più importante e l'utilizzo è molto semplice.

document.addEventListener( 'DOMContentLoaded', function () {
	sliders.push(new jsSlider("sa1", 1, 4000, 1, 0));
	sliders.push(new jsSlider("sa2", 1, 4000, 2, 1));
	sliders.push(new jsSlider("sa3", 1, 4000, 3, 0));
	sliders.push(new jsSlider("sm1", 0, 4000, 1));
	sliders.push(new jsSlider("sm2", 0, 4000, 2));
	sliders.push(new jsSlider("sm3", 0, 4000, 3));
}, false );

Con l'utilizzo di addEventListener si avvia lo slide al caricamento del DOM, basta richiamare new jsSlider sull id del DIV per attivare lo slider.

Codice JavaScript

var helpers = {};
helpers.once = function (fn, context) { 
	var result;
	return function() { 
		if(fn) {
			result = fn.apply(context || this, arguments);
			fn = null;
		}
		return result;
	};
};
helpers.isset = function () {
	var a = arguments, l = a.length, i = 0, undef;
	if (l === 0) {
		throw new Error('Empty isset');
	}
	while (i !== l) {
		if (a[i] === undef || a[i] === null) {
			return false;
		}
		i++;
	}
	return true;
};
helpers.empty = function (mixed_var) {
	var undef, key, i, len;
	var emptyValues = [undef, null, false, 0, '', '0'];
	for (i = 0, len = emptyValues.length; i < len; i++) {
		if (mixed_var === emptyValues[i]) {
			return true;
		}
	}
	if (typeof mixed_var === 'object') {
		for (key in mixed_var) {
			return false;
		}   
		return true;
	}
	return false;
};
helpers.returnStyle = function (el, styleProp) {
	var x = undefined;
	if (this.isset(el.currentStyle)) {
		x = el.currentStyle[styleProp];
	} else if (this.isset(window.getComputedStyle)) {
		x = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
	}
	if(this.empty(x)) {
		x = '0px';
	}
	return x;
};
helpers.resetSliders = function (sliders) {
	for (var i = 0; i < sliders.length; i++) {
		sliders[i].resetSlider();
	}
};

// int - id to apply, 
// loop - loop or not, 
// sliderIntervalTime - milisecconds between loops, 
// divsNumberShow - number of divs inside container, 
// infiniteLoops - loop infinitely or not 
var jsSlider = function(id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops) {
	var self = this;
	this.container = undefined;
	this.containerMarginRight = 0;
	this.containerMarginLeft = 0;
	this.containerPaddingRight = 0;
	this.containerPaddingLeft = 0;
	this.containerBorderLeftWidth = 0;
	this.containerBorderRightWidth = 0;
	this.sliderInterval = undefined;
	this.tr = undefined;
	this.divs = undefined;
	this.numCallsInteval = 0;
	this.infiniteLoops = 0;
	this.loop = 0;
	this.containerWidth = 0;
	this.containerInner = 0;
	this.sliderIntervalTime = 4000;
	this.deviation = 0;
	this.divsNumberShow = 1;
	this.divsMarginRight = 0;
	this.divsMarginLeft = 0;
	this.divsPaddingRight = 0;
	this.divsPaddingLeft = 0;
	this.divsBorderLeftWidth = 0;
	this.divsBorderRightWidth = 0;
	this.pager = undefined;
	this.pagerCounter = 0;
	this.hideNext = function () {
		self.showNextPrev();
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		ctrlSelectors[1].style.display = 'none';
	};
	this.hidePrev = function () {
		self.showNextPrev();
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		ctrlSelectors[0].style.display = 'none';
	};
	this.showNextPrev = function () {
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		for (var i = 0; i < ctrlSelectors.length; i++) {
			ctrlSelectors[i].style.display = 'block';
		}
	};
	this.showHideNextPrev = function () {
		var currentPagerLength = ((Math.ceil(self.divs.length / self.divsNumberShow)) - 1);
		if(!self.loop && (self.pagerCounter === currentPagerLength)) {
			self.hideNext();
		} else if(!self.loop && self.pagerCounter === 0) {
			self.hidePrev();
		} else {
			self.showNextPrev();
		}
	};
	this.pagerReset = function () {
		var pagerElements = self.pager.getElementsByClassName("pager-element");
		for (var i = 0; i < pagerElements.length; i++) {
			if(pagerElements[i].className === 'pager-element activated') {
				pagerElements[i].className = 'pager-element';
				break;
			}
		}
		pagerElements[0].className += ' activated';
	};
	this.pagerMove = function () {
		var pagerElements = self.pager.getElementsByClassName("pager-element");
		var activatedElement = 0;
		for (var i = 0; i < pagerElements.length; i++) {
			if(pagerElements[i].className === 'pager-element activated') {
				pagerElements[i].className = 'pager-element';
				activatedElement = self.pagerCounter;
			}
		}
		var activatedCounter = activatedElement < 0 ? pagerElements.length - 1 : activatedElement % pagerElements.length;
		pagerElements[activatedCounter].className = 'pager-element activated';
	};
	this.showPagerSlide = function (counter) {
		var currentPagerLength = ((Math.ceil(self.divs.length / self.divsNumberShow)) - 1);
		self.pagerCounter = (counter < 0 ? currentPagerLength : (counter > currentPagerLength ? 0 : counter));
		self.showHideNextPrev();
		for (var i = 0; i < self.divs.length; i++) {
			if(self.loop && self.pagerCounter === 0) {
				self.divs[i].style.right = '0px';
			} else if(self.loop && self.pagerCounter === (self.divs.length - 1)) {
				self.divs[i].style.right = (currentPagerLength * (self.containerInner)) + 'px';
			} else {
				self.divs[i].style.right = (self.pagerCounter * self.containerInner) + 'px';
			}
		}
		self.pagerMove();
	};
	this.showPagerSlideStopInterval = function (counter) {
		self.showPagerSlide(counter);
		self.stopSlider();
	};
	this.showNextSlide = function () {
		self.pagerCounter++;
		self.showPagerSlide(self.pagerCounter);
	};
	this.showNextSlideStopInterval = function () {
		self.showNextSlide();
		self.stopSlider();
	};
	this.showPrevSlide = function () {
		self.pagerCounter--;
		self.showPagerSlide(self.pagerCounter);
	};
	this.showPrevSlideStopInterval = function () {
		self.showPrevSlide();
		self.stopSlider();
	};
	this.stopSlider = helpers.once(function() {
		clearInterval(self.sliderInterval);
	});
	this.startSlider = function () {
		if(self.numCallsInteval > 0) {
			self.showNextSlide();
		}
		else {
			self.stopSlider();
		}
		if(!self.infiniteLoops) {
			self.numCallsInteval--;
		}
	};
	this.resetSlider = function () {
		if(self.loop) {
			self.stopSlider();
		} else {
			self.hidePrev();
		}
		self.recalcConainer();
		self.recalcDeviation();
		for (var i = 0; i < self.divs.length; i++) {
			self.divs[i].style.width = ((self.containerInner - self.deviation) / self.divsNumberShow) + 'px';
			self.divs[i].style.right =  '0px';
		}
		self.pagerReset();
	};
	this.recalcConainer = function () {
		self.containerMarginRight = helpers.returnStyle(self.container, 'margin-right');
		self.containerMarginLeft = helpers.returnStyle(self.container, 'margin-left');
		self.containerPaddingRight = helpers.returnStyle(self.container, 'padding-right');
		self.containerPaddingLeft = helpers.returnStyle(self.container, 'padding-left');
		self.containerBorderLeftWidth = helpers.returnStyle(self.container, 'border-left-width');
		self.containerBorderRightWidth = helpers.returnStyle(self.container, 'border-right-width');
		self.containerWidth = self.container.offsetWidth;

		self.containerInner = 
			self.containerWidth 
			- parseInt(self.containerPaddingRight) 
			- parseInt(self.containerPaddingLeft) 
			- parseInt(self.containerBorderLeftWidth) 
			- parseInt(self.containerBorderRightWidth);
	};
	this.recalcDeviation = function () {
		self.deviation = 
			(parseInt(self.divsMarginRight)
			+ parseInt(self.divsMarginLeft)
			+ parseInt(self.divsPaddingRight)
			+ parseInt(self.divsPaddingLeft)
			+ parseInt(self.divsBorderLeftWidth)
			+ parseInt(self.divsBorderRightWidth)) * self.divsNumberShow;
	};
	this.createSlider = function (id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops) {
		if(helpers.isset(id)) {
			self.loop = helpers.isset(loop) ? loop : 1;  
			self.sliderIntervalTime = helpers.isset(sliderIntervalTime) ? sliderIntervalTime : 4000;
			self.divsNumberShow = helpers.isset(divsNumberShow) ? divsNumberShow : 1;
			self.container = document.getElementById(id);
			var ctrlSelectorNext = document.createElement('span');
			ctrlSelectorNext.id = 'next';
			ctrlSelectorNext.className = 'ctrl-selector';
			ctrlSelectorNext.innerHTML = ' ';
			ctrlSelectorNext.onclick = self.showNextSlideStopInterval;
			self.container.appendChild(ctrlSelectorNext);
			var ctrlSelectorPrev = document.createElement('span');
			ctrlSelectorPrev.id = 'prev';
			ctrlSelectorPrev.className = 'ctrl-selector';
			ctrlSelectorPrev.innerHTML = ' ';
			ctrlSelectorPrev.onclick = self.showPrevSlideStopInterval;
			self.container.insertBefore(ctrlSelectorPrev ,self.container.firstChild);
			self.pager = document.createElement('div');
			self.pager.className = 'pager';
			self.container.appendChild(self.pager);
			self.divs = self.container.getElementsByClassName("element");
			self.divsMarginRight = helpers.returnStyle(self.divs[0], 'margin-right');
			self.divsMarginLeft = helpers.returnStyle(self.divs[0], 'margin-left');
			self.divsPaddingRight = helpers.returnStyle(self.divs[0], 'padding-right');
			self.divsPaddingLeft = helpers.returnStyle(self.divs[0], 'padding-left');
			self.divsBorderLeftWidth = helpers.returnStyle(self.divs[0], 'border-left-width');
			self.divsBorderRightWidth = helpers.returnStyle(self.divs[0], 'border-right-width');
			self.infiniteLoops = helpers.isset(infiniteLoops) ? infiniteLoops : 0;
			self.recalcConainer();
			self.recalcDeviation();
			for (var i = 0; i < self.divs.length; i++) {
				self.divs[i].style.width = ((self.containerInner - self.deviation) / self.divsNumberShow) + 'px';
			}
			for (var i = 0; i < Math.ceil(self.divs.length / self.divsNumberShow); i++) {
				var pagerElement = document.createElement('span');
				pagerElement.className = 'pager-element';
				pagerElement.innerHTML = i + 1;
				if (typeof window.addEventListener === 'function'){
					(function (_i) {
						pagerElement.addEventListener('click', function(){
							self.showPagerSlideStopInterval(_i);
						});
					})(i);
				}
				self.pager.appendChild(pagerElement);
			}
			self.numCallsInteval = Math.ceil(self.divs.length / self.divsNumberShow) - 1;
			if(self.loop) {
				self.sliderInterval = setInterval(function() {
					self.startSlider();
				}, self.sliderIntervalTime);
			} else {
				self.hidePrev();
			}
			self.pagerReset();
		}
	};
	this.createSlider(id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops);
};

var sliders = [];
var resizing;

document.addEventListener( 'DOMContentLoaded', function () {
	sliders.push(new jsSlider("sa1", 1, 4000, 1, 0));
	sliders.push(new jsSlider("sa2", 1, 4000, 2, 1));
	sliders.push(new jsSlider("sa3", 1, 4000, 3, 0));
	sliders.push(new jsSlider("sm1", 0, 4000, 1));
	sliders.push(new jsSlider("sm2", 0, 4000, 2));
	sliders.push(new jsSlider("sm3", 0, 4000, 3));
}, false );

window.addEventListener('resize', function () {
	clearTimeout(resizing);
	resizing = setTimeout(function () {
		helpers.resetSliders(sliders);}, 100);
}, false );

Codice HTML

<div id="sa1" class="quantum-slider">
	<div class="element">
		1. <img style="float:right; margin-left: 15px;" src="../img/lena.gif" width="150" height="150" />  Lorem ipsum dolor sit amet...
	</div>
</div>