Simple-slider-ts NPM

simple-slider

File Size: < 1.2kB gzipped

https://github.com/clintonelec/simple-slider

Extremely lightweight carousel micro library.

About

simple-slider-ts is a carousel micro library based on the requestAnimationFrame API. It makes for a highly testable implementation and less css-dependent.

This package contains a framework agnostic implementation based on the simple-slider library. If you need to use a library built in JavaScript instead, or if you are using AngularJS or Polymer there are some simple-slider framework-specific implementations available:

Features

Small size, less than 1.2kb minified/gzipped
Support to UMD: AMD, CommonJS and global definition
Uses requestAnimationFrame for animations
Supports Page visibility API to pause/resume transitions when user navigates away from the page
Accept ease functions to customize the transition animation
Lots of ready-to-use examples available, just check the example folder
Animates any numerical css property

Install

Available on npm:

npm install --save simple-slider-ts

Usage

Simply import the script in your project and call the getSlider function with options if necessary. In this case the slider will use its default left-to-right sliding animation and the container element will be the first element containing a data-simple-slider attribute.

import getSlider from "simple-slider-ts";

getSlider();

Options

Options are set as named properties of a single parameter accepted by the getSlider function, they help you customize the slider transition and how it's going to work.

The main option is a container element, this will usually be a <div> or <ul> containing the elements to be transitioned, keep in mind that this container should also have a defined width/height value. You can also tweak things such as the delay time between each transition, how long each transition will take, etc.

getSlider({
	container: document.getElementById('myslider'),
	transitionTime: 1,
	delay: 3.5
});

Available Options

Here is the list of available values to customize how your slider is going to work:

containerElem: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) The HTML element that act as a container for the slider. Defaults to document.querySelector('*[data-simple-slider]).
children [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)/Array A list of children to be used as slides, you can use the querySelectorAll to have more flexibility on what children of the containerElem element should be used as slides. Defaults to containerElem.children.
paused: Controls carousel auto-transition/slideshow. If value is true no transition will happen. Defaults to false.
trProp: Determines the css property to be animated. Defaults to left.
trTime: Value setting the duration of animation transition. Defaults to 0.5.
delay: Value determining the wait between each animation when auto-transition is enabled. Defaults to 3 seconds.
startVal: Initial value of slide elements when starting a transition animation. Defaults to -100.
visVal: The value a slide element should have when it is displayed. Defaults to 0.
endVal: The value a slide will move to during a transition animation. Defaults to 100.
unit: The css unit value to be used. Defaults to %.
ease: An ease function, you can use any of these. Defaults to defaultEase internal function.
onChange: A callback function to be invoked each time a slide changes.
onChangeEnd: A callback function to be invoked at the end of the slide transition

Default values

{
  containerElem: document.querySelector('*[data-simple-slider]'),
  children: container.children,
  paused: false,
  trProp: 'left',
  trTime: 0.5,
  delay: 3,
  startVal: -100,
  visVal: 0,
  endVal: 100,
  unit: '%',
  ease: defaultEase function,
  onChange: null,
  onChangeEnd: null
}

Programmatic API

Some methods are exposed by the returning value of the function allowing you to control the slider.

const slider = simpleslider.getSlider({
	containerElem: document.getElementById('myslider'),
	onChangeEnd: updateCurrentIndex
});
let currentIndex;

function updateCurrentIndex() {
	currentIndex = slider.currentIndex();
}

// pauses slideshow
slider.pause();

Available methods:

change(index: number) Changes image to a given index value.
dispose() Disposes of all internal variable references.
getCurrentIndex() Returns the index of the current displaying image.
next() Switches displaying image to the next one.
nextIndex() Gets the index of the next slide to be shown.
pause() Pauses the slideshow.
prev() Switches displaying image to the previous one.
prevIndex() Gets the index of the previous slide.
reset() Resets the slideshow.
resume() Resumes the slideshow.
reverse() Swaps init for end and reverses the order of slides.
updateConfig(options: SliderOpts, withResume?: boolean) Updates the configuration and restarts the slideshow.