API Guide

simpleslider.getSlider(options)

AKA the initialization method. Creates a new simple-slider instance using the provided options, returns a Slider object.

Usage example:

var slider = simpleslider.getSlider({
  container: document.getElementById('mysliderid')
});

If options are omitted, their default value is used, here is a list with all the available options and their default values:

{
  container: document.querySelector('*[data-simple-slider]'),
  children: container.children,
  paused: false,
  prop: 'left',
  duration: 0.5,
  delay: 3,
  init: -100,
  show: 0,
  end: 100,
  unit: '%',
  ease: defaultEase function,
  onChange: undefined,
  onChangeEnd: undefined
}

• container <Element> The HTML element that act as a container for the slider. Defaults to document.querySelector('*[data-simple-slider]).

• children <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 container element should be used as slides. Defaults to container.children.

• paused <Boolean> Controls carousel auto-transition/slideshow. If value is true no transition will happen. Defaults to false.

• prop <String> Determines the css property to be animated. Defaults to left.

• duration <Number> Value setting the duration of animation transition. Defaults to 0.5.

• delay <Number> Value determining the wait between each animation when auto-transition is enabled. Defaults to 3 seconds.

• init <String/Number> Initial value of slide elements when starting a transition animation. Defaults to -100.

• show <String/Number> The value a slide element should have when it is displayed. Defaults to 0.

• end <String/Number> The value a slide will move to during a transition animation. Defaults to 100.

• unit <String> The css unit value to be used. Defaults to %.

• ease <Function> An ease function, you can use any of these. Defaults to defaultEase internal function.

• onChange(prevIndex, nextIndex) <Function> A callback function to be defined by the user. This function will be called everytime a slide changes and will contain two arguments, the first one is the index value of the previous active slide and the second is the index value of the next slide to be inserted.

• onChangeEnd(prevIndex, nextIndex) <Function> A callback function to be defined by the user. Called everytime the animation transition is completed, it has the current displaying slide index value and the next slide index value passed as parameters.

Slider

The Slider object is returned when a new slider is created using simpleslider.getSlider() it exposes many methods that allow you to control it. Here you can see a list with all methods available, further bellow follows a description of each method.

Slider {
    currentIndex()
    pause()
    resume()
    reverse()
    nextIndex()
    prevIndex()
    next()
    prev()
    change(index)
    dispose()
}

• currentIndex() <Number>

Retrieves the index of the current displaying slide.

• pause()

Pauses the slider slideshow.

• resume()

Resumes the slider slideshow.

• reverse()

Swaps the values of the init property with the one from end and also reverses the order of slides.

• nextIndex() <Number>

Gets the index of the next slide to be shown.

• prevIndex() <Number>

Gets the index of the previous slide.

• next()

Perform the remove animation of the actual displaying slide and insert the next one from the slide list.

• prev()

Perform the remove animation of the actual displaying slide and insert the previous one from the slide list.

• change(index <Number>)

Change displaying slides, it will perform the remove animation of the actual displaying slide and insert the slide that corresponds to the provided index value.

var slider = simpleslider.getSlider();
// Jumps to third slide:
slider.change(2);

• dispose()

Disposes of all internal variable references.

var slider = simpleslider.getSlider();
// Free memory used by slider
slider.dispose();