reely
A lightweight 360° slider for showcasing your products
- No jQuery dependency
- Heavily inspired by rollerblade
- touch-friendly
- Progressively loading images on initialization
Installation
npm install --save reely
Usage
; const images = 'images/0000.jpg' 'images/0001.jpg' 'images/0002.jpg'; const container = document; const slider = ; slider;
API
Method | Arguments | Description |
---|---|---|
init | options | Initializes reely with options |
slideTo | slideNumber | Slides slideNumber |
Options
At initialization reely accepts multiple options:
Property Name | Type | Default | Description |
---|---|---|---|
sensitivity | number |
35 |
The lower the number, the more sensitive the rotator will be. The number value represents distance in pixels between each frame change. |
drag | boolean |
true |
Determines if the rotator is draggable. If set to false, image will rotate on any mouse movement along the X axis of the page. |
auto | boolean |
false |
Determines if rotator should spin by itself. Default is set to false. If set to true, rotator will spin and user interaction will be disabled. |
edgeStop | boolean |
false |
Determines if the rotator should keep on rotating when the first or last image is reached. |
Events
Event Name | Description |
---|---|
slideChanged | Emits after the current slide has changed. Carries e.detail.currentSlide (see /examples folder) |
Contribution
npm run dev
License
Copyright (c) 2018-present, Klaus Fischer