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.