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

Photo credits: Microsoft Xbox One X

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.

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

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