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

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.

Browser Support

IE 10+ ✔	Latest ✔	Latest ✔	Images ✔ Videos :(	Latest ✔

On mobile, use only images.

License

No license. Use as you wish.

Copyright (c) 2015 Cezar Luiz.