Threesixty NPM

Threesixty

A minimal, dependency-free vanilla 360° slider.

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