ReactRotate360

ReactRotate360 is a plugin to create 360 degree showcases. Inspired on Apple iPhone 360 showcase.

Made with React and HTML5.

Works with videos or images.

Examples

To build the examples locally, run:

npm install
gulp dev

Then open localhost:8000 in a browser.

Video GIF Demo

Images GIF Demo

Image GID Demo

Usage

The plugin uses input[type=range] for the slide. You can check the support here.

Videos

You can use this plugin with videos (mp4, ogg or webm).

var sources = [
  'path/to/videos/video.mp4',
  'path/to/videos/video.oggtheora.ogv',
  'path/to/videos/video.webmhd.webm'
];

React.render(<Rotate src={sources} />, document.querySelector('#video'));

Images

// Render images
React.render(<Rotate type="image" path="examples/images" ext="png" total="43" />, document.querySelector('#images'));

CSS Classes

.rotate-box { }
.rotate-video { }
.rotate-image { }
.rotate-range { } /* For input[type=range] */
.rotate-range::-webkit-slider-thumb { }

Documentation

Attribute | Type | Use with? | Default | Description --- | --- | --- | --- | --- | src | array | video | - | Pass an array with your videos path. The plugin will create the <source> tags. type | string | both | video | Use video or image path | string | image | - | Pass the path of your images. The images need follow a sequence. The first image need start with 1. e.g: 1.png, 2.png, 3.png ... 30.png ext | string | image | jpg | The extension of your images. total | string or int | image | - | Pass the quantity of your images.