A minimal, dependency-free vanilla 360° slider.
- Super easy to set up
- No dependencies
- Touch events
- Touch-enabled laptops support (touch + mouse)
npm install --save threesixty
Initialise threesixty
by passing both container
and images
required arguments.
The Element to display the slider in.
An Array containing a list of images.
var container = document.querySelector('#slider');
var images = [
'images/sequence-01.jpg',
...
'images/sequence-50.jpg'
]
var slider = threesixty(container, images);
slider.init()
You can also provide an options
object. Here's an overview of the default values.
threesixty(container, images, {
interactive: true,
currentImage: 0,
reverse: false
});
Enable or disable mouse interactivity.
Set the current image index.
Reverses the direction the image rotates when dragging.
Method | Arguments | Method Description |
---|---|---|
init |
Initialise the slider | |
previous |
Go back to the previous frame | |
next |
Advance to the next frame | |
isInteractive |
Returns options.interactive value |
|
isReverse |
Returns options.reverse value |
|
getCurrentFrame |
Returns options.currentFrame value |
npm test
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE file for details.