Skip to content

Latest commit

 

History

History
135 lines (119 loc) · 4.14 KB

README.md

File metadata and controls

135 lines (119 loc) · 4.14 KB
Raw

View360

A View360 Component will be used to rotate the image 360 Degree. We have to pass multiple image from different angle to support 360 view of image.

Demo

A minimal Demo Link

Usage/Examples

Value Used as a Description
View360 ✅ Component Can be used as Component
view360 ❌ Service Can be used as Service
1. Here's an example of basic usage with Multiple Import: with Default Import:
// Default import will return View360 Component
import View360 from 'fe-pilot/View360';


<View360
  height="600px"
  width="100%"
  imageList={[
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(1).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(2).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(3).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(4).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(5).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(6).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(7).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(8).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(9).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(10).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(11).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(12).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(13).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(14).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(15).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(16).jpg",
  ]}
/> // Used as a Component
2. Here's an example of basic usage with Multiple Import: with Multiple Import:
import { View360 } from 'fe-pilot/View360';

<View360
  height="600px"
  width="100%"
  imageList={[
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(1).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(2).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(3).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(4).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(5).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(6).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(7).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(8).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(9).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(10).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(11).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(12).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(13).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(14).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(15).jpg",
    "http://woosterwebdesign.com/experiments/images/car_slides/car_(16).jpg",
  ]}
/> // Used as a Component

Props

Props Type Description Default Value
height String Height of the Image Default value is 300px
width String Width of the Image Default value is 100%
imageList Array Provide the images from different angle to rotate Default value is []