Skip to content

rbartoli/threesixty

Repository files navigation

Threesixty

Npm package version Travis Npm dependencies Npm total dowloads License

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.

About

A minimal, dependency-free vanilla 360° slider

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •