360-Degree Viewer - Experimentals - Spectre.css CSS Framework
Author: Yan Zhu
Description: 360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

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

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.