[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):

0%


    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.

    threesixty-slider

    Source