Existen muchas utilidades y técnicas que podemos hacer con JQuery, una de ellas es la de hacer un slider, pero hay muchas formas de hacer slider. Normalmente cuando tenemos un producto queremos que sea visto en todos sus ángulos y formas, por ello, ¿qué mejor manera de crear un slider que pueda verse en 360 grados? Pues sí, se puede, para ello se usan un número de imágenes, cada una cogida desde un ángulo distinto, y luego con JQuery se hace la magia y conseguimos crear ese efecto de 360 grados.

Os explicaré a grosso modo su estructura y las partes esenciales:

Estructura Javascript

window.onload = init;

var car;
function init(){

car = $('.car').ThreeSixty({
totalFrames: 52, // El nº de imagenes que tengas, cada una cogida desde un ángulo distinto
endFrame: 52, // El frame donde termina la autovista en 360º
currentFrame: 1, // El frame donde empieza la autovista en 360º
imgList: '.threesixty_images', // selector para la lista de imágenes
progress: '.spinner', // selector para mostrar el proceso de carga
imagePath:'assets/car/', // ruta donde se cargarán las imágenes
filePrefix: '', // prefijo del archivo (si hay alguno)
ext: '.png', // extension
height: 1000,
width: 447,
navigation: true
});

}

Estructura HTML

El simplemente muestra el proceso de carga.

<div class="threesixty car">

<div class="spinner">

<span>0%</span>

</div>

<ol class="threesixty_images"></ol>

</div>

Ejemplo y descarga

En el enlace que te muestro a continuación puedes verlo y usarlo, además de descargarlo o modificarlo en directo.