Spectre CSS

360-Degree Viewer ​

JS Required

360-Degree Viewer is an interactive product photo viewer.

It is built in pure CSS, but requires a JavaScript handler to update the value attribute.

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

html
<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>

The default image numbers in CSS are 36. You can copy the mixin and add more numbers in _viewer-360.scss and re-compiling the CSS.

scss
@include viewer-slider-size(36);
@include viewer-slider-size(30);