Threesixty

A minimal, dependency-free vanilla 360° slider.

Demo

Demo

Features

• Super easy to set up
• No dependencies
• Touch events
• Touch-enabled laptops support (touch + mouse)

Installation

npm install --save threesixty

Usage

threesixty(container*, images*, options?)

Initialise threesixty by passing both container and images required arguments.

container

The Element to display the slider in.

images

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

Options

You can also provide an options object. Here's an overview of the default values.

threesixty(container, images, {
  interactive: true,
  currentImage: 0,
  reverse: false
});

options.interactive

Enable or disable mouse interactivity.

options.currentImage

Set the current image index.

options.reverse

Reverses the direction the image rotates when dragging.

API

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

Tests

npm test

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE file for details.