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.