reely

a lightweight 360° slider for showcasing products

Usage no npm install needed!

<script type="module">
  import reely from 'https://cdn.skypack.dev/reely';
</script>

README

reely

A lightweight 360° slider for showcasing your products

  • No jQuery dependency
  • Heavily inspired by rollerblade
  • touch-friendly
  • Progressively loading images on initialization

Installation

npm install --save reely

Usage

<div class="reely">
  <img src="images/0000.jpg">
</div>

import reely from 'reely';

const images = [
  'images/0000.jpg',
  'images/0001.jpg',
  'images/0002.jpg'
];

const container = document.querySelector('.reely');

const slider = reely(container, {
  imageArray: images,
});

slider.init();

API

Method Arguments Description
init options Initializes reely with options
slideTo slideNumber Slides slideNumber

Options

At initialization reely accepts multiple options:

Property Name Type Default Description
sensitivity number 35 The lower the number, the more sensitive the rotator will be. The number value represents distance in pixels between each frame change.
drag boolean true Determines if the rotator is draggable. If set to false, image will rotate on any mouse movement along the X axis of the page.
auto boolean false Determines if rotator should spin by itself. Default is set to false. If set to true, rotator will spin and user interaction will be disabled.
edgeStop boolean false Determines if the rotator should keep on rotating when the first or last image is reached.

Events

Event Name Description
slideChanged Emits after the current slide has changed. Carries e.detail.currentSlide (see /examples folder)

Contribution

npm run dev

License

MIT

Copyright (c) 2018-present, Klaus Fischer