3D cubo imagen rotador/carrusel en JavaScript-DiMAGE. js

Vista prévia

Descripción

DiMAGE. js es una librería de rotador/carrusel JavaScript simple muerto que hace uso de las transformaciones CSS3 para rotar a través de imágenes al igual que un cubo 3D.

Funcionamiento

Descargar y vincular a la DiMAGE. js en el documento.

<script src="dimage.js"></script>

Agregue la clase CSS DiMAGE al contenedor de rotadores y especifique las imágenes frontal/posterior/izquierda/derecha de la siguiente manera:

<div class="dimage"


 data-image-front="front.jpg"


 data-image-right="right.jpg"



data-image-left="left.jpg"


 data-image-back="back.jpg">
</div>

La librería también soporta una sola imagen:

<div class="dimage"


 data-image="single.jpg">
</div>

Inicializar la biblioteca y listo.

dimage().initDimages();

Defina la dirección de rotación: izquierda o derecha.

<div class="dimage"


 data-direction="left"


 data-image-front="front.jpg"


 data-image-right="right.jpg"



data-image-left="left.jpg"


 data-image-back="back.jpg">
</div>

<div class="dimage"


 data-direction="right"


 data-image="single.jpg">
</div>

Ajuste el tamaño del rotor.

<div class="dimage"


 data-size="400"


 data-image-front="front.jpg"


 data-image-right="right.jpg"



data-image-left="left.jpg"


 data-image-back="back.jpg">
</div>

Ajuste la velocidad de la animación. Cuanto menor es el valor, más rápida es la velocidad

<div class="dimage"


 data-speed="60"


 data-image-front="front.jpg"


 data-image-right="right.jpg"



data-image-left="left.jpg"


 data-image-back="back.jpg">
</div>

<div class="dimage"


 data-speed="1"


 data-image="single.jpg">
</div>