Visor de imágenes de 360 grados con JavaScript puro-circlr

Vista prévia

Descripción

circlr. js es una biblioteca de JavaScript ligera que le permite crear una vista panorámica de 360 grados a partir de una serie de imágenes.

circlr. js permite al visitante rotar las imágenes del producto con eventos de desplazamiento, ratón y toque y funciona en todos los dispositivos táctiles sin ninguna otra compatibilidad con la biblioteca táctil.

Instalación

# NPM
$ npm install circlr --save

¿Cómo funciona?

Descargue e incluya la última versión de la biblioteca circlr. js al final del documento.

<script src="circlr.min.js"></script>

Prepare las imágenes de sus productos con diferentes ángulos e insértelos en el documento como sigue.

<div id="circlr">

<img data-src="images/00.jpg">

<img data-src="images/01.jpg">

<img data-src="images/02.jpg">

<img data-src="images/03.jpg">

<img data-src="images/04.jpg">

<img data-src="images/05.jpg">

<img data-src="images/06.jpg">

<img data-src="images/07.jpg">

<img data-src="images/08.jpg">

<img data-src="images/09.jpg">

<img data-src="images/10.jpg">

<img data-src="images/11.jpg">

<img data-src="images/12.jpg">

<img data-src="images/13.jpg">

<img data-src="images/14.jpg">

<img data-src="images/15.jpg">

<div id="loader"></div>
</div>

Inicializar el visor de imágenes.

const el = document.querySelector('#circlr');
circlr(el)

.scroll(true)

.play()

.on('show', n => {


});

API methods.

// Return object DOM node
crl(el)

// Rotation via scroll flag.
crl.scroll(n)

// Vertical orientation flag.
crl.vertical(n)

// Reverse rotation flag.
crl.reverse(n)

// Cyclic rotation flag, default true.
crl.cycle(n)

// Start frame, default 0.
crl.start(n)

// Playback interval, default 75 ms.
crl.interval(ms)

//Frame number for playback to him or infinity playback if number in not specified.
crl.play([n])

// Stop playback
crl.stop()

// Hide object DOM node
crl.hide()

// Show specified frame.
crl.show(n)

// Show previous frame.
crl.prev()

// Show next frame.
crl.next()

// Unbind rotation events.
crl.unbind()

Registro de cambios

v3.1.1 (06/25/2017)

• Agregar método de escuchas Desenlazar