react-360-view
- A Simple and Beautiful 360° Product Viewer built on React
Click here for Vue version
Demo
Features
- 360° View
- Zoom
- Pan
- Autoplay (Loops)
- Full Screen Mode
- Spin Direction
- Image Caching
- Mobile Responsive (Under works)
- Touch Events (Under works)
Installation
npm install reactjs-360-view
Config
import React360view from 'reactjs-360-view'
styles.css
@import url('https://cdn.jsdelivr.net/npm/reactjs-360-view/styles.css');
Example
<React360view
amount={36}
imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
fileName="chair_{index}.jpg?v1"
/>
Adding a Header
<div class="v360-header text-light bg-dark">
<span class="v360-header-title">36 Images - Autoplay (1 loop) - Reverse Spin</span>
<span class="v360-header-description"></span>
</div>
Icons
- The icons used in the demo are from fontawesome. Add the following in your header to display the icons.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
Props
| Name | Type | Description | Required | Default Value |
|---|---|---|---|---|
| amount | Number | Number of images | Yes | |
| imagePath | String | Path to your image | Yes | |
| fileName | String | File name format | Yes | |
| spinReverse | Boolean | Reverse Spin | Optional | false |
| autoplay | Number | Autoplay your images | Optional | 24 |
| loop | Number | Number of loops you want to autoplay | Optional | 1 |
| boxShadow | Boolean | Apply Box Shadow Background | Optional | false |
| buttonClass | String | Apply Styling to Buttons | Optional (light/dark) | light |
| paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false |
Buttons
(In order from left to right)
- Play/Pause
- Zoom In
- Zoom Out
- Pan / 360° Mode
- Move Left
- Move Right
- Reset Position
Roadmap
- Hotspots
- Lazyloading
- Custom CSS Classes
- Custom Buttons
- And a few more ...