[JS] ThreeSixty Slider – Slider d’image à 360°

Que ce soit pour mettre en place un panorama 360° d’un paysage sur votre site, ou un slider 360° pour présenter vos produits sur votre e-commerce, l’utilisation de slider 360° peut apporter une vraie plus value pour vos visiteurs. ThreeSixty Slider, est un plugin jQuery permettant de le faire.

Le fonctionnement est plutôt simple, vous découpez en plusieurs images votre panorama (Plus il y’a d’images, plus le slider est fluide) et l’API du plugin permet de créer vos propres contrôles personnalisés pour naviguer dans le 360. Il y a également une fonction lecture qui permet de faire défiler automatiquement le slider.

D’un point de vue code, vous définissez l’architecture HTML avec le spinner qui permettra d’indiquer les % de chargement à vos visiteurs (à styler en CSS):

<div class="threesixty car">
<div class="spinner">0%</div>
</div>

Et ensuite vous appelez le plugin jQuery avec les options qui vont bien :

window.onload = init;
var car;
function init(){
	car = $('.car').ThreeSixty({
		totalFrames: 52, // Total no. of image you have for 360 slider
		endFrame: 52, // end frame for the auto spin animation
		currentFrame: 1, // This the start frame for auto spin
		imgList: '.threesixty_images', // selector for image list
		progress: '.spinner', // selector to show the loading progress
		imagePath:'assets/car/', // path of the image assets
		filePrefix: '', // file prefix if any
		ext: '.png', // extention for the assets
		height: 1000,
		width: 447,
		navigation: true
	});
}

Attention : toutes vos images devront se situer dans le répertoire défini par l’option imagePath, et numérotées de 1 au nombre total de frames.

Source