react-360-view-extended

• A Simple and Beautiful 360° Product Viewer built on React
• Based on react-360-view by Rajeev R. Gade
• Adds the ability to disable scroll-triggered Zoom (helpful for preventing unintended zooms on desktop)
• Adds the ability to hide control buttons

Click here for Vue version

Demo

Demo | Documentation

Example

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 react-360-view

Config

import ThreeSixty from 'react-360-view'

Example

<ThreeSixty
    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 | | disableScrollZoom | Boolean | Prevents zoom from scroll events | Optional | false | | hideButtons | Boolean | Hides the control buttons | 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 ...

Credits

• react-360-view by Rajeev R. Gade
• vue
• core-js
• Cloud Image