360-Degree Viewer#

CSS ONLY

360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS.

Photo credits: Microsoft Surface Pro 6

You will need to use your own product image sprite (all angle of photos in one image) and change the attribute max to use this component.

The default image number in CSS is 36. You can change the image number by changing the variable $image-number in _viewer-360.scss and re-compiling the CSS.

<div class="viewer-360">
  <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
  <figure class="viewer-image" style="background-image:url('...');"></figure>
</div>