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);