Slider gratuito a 360º con imágenes [plugin jQuery]

Threesixty-slider es un plugin jQuery para crear la ilusión de imágenes que giran a 360º utilizando para ello un mecanismo prácticamente idéntico al de cualquier slider jQuery.

La gran diferencia con otros sliders es que las imágenes se superponen, de esta manera no hay ningún salto visible entre imagen e imagen, creando el efecto de girar 360º.

slider 360 grados jQuery

Las posibilidades son muchas, por ejemplo puede ser un plugin muy útil para sitios de ventas de productos, en donde los usuarios buscan más detalles acerca del producto antes de realizar la compra.

Como el efecto esta dado por la cantidad de imágenes, a mayor numero de fotogramas más fluido se vera el giro a 360º.

Threesixty-slider tiene otra ventaja, puedo ejecutar la reproducción de manera automática en lugar de utilizar los controles para girar la imagen de manera manual. Estos pueden ser modificados con total facilidad desde las hojas de estilo.

Ejemplo de uso:

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
    });

}

En el sitio oficial del proyecto pueden ver una demostración online. Si navegan un poco el sitio van a encontrar varios ejemplos sobre como personalizar los controles. A la fecha es el plugin más sencillo que encontré para realizar este tipo de tareas.

Web: Threesixty-slider

Categorizado en: