Threesixty

A minimal, dependency-free vanilla 360° slider.

Demo

Demo

Features

• Super easy to set up
• No dependencies
• Touch events

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

options.interactive

Enable or disable mouse interactivity.

options.currentImage

Set the current image index.

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
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.