About application programming interfaces (APIs)

An API is a way to control an application, or get some info about the data which the application is working with. This is a way to two separate application can work together. Cute Slider has an API too, you can control the slider from outside of the application.

API methods

• next(): The slider will switch to the next slide.
• previous(): The slider will go back to the previous slide.
• pause(): Pauses slideshow.
• play(): Starts slideshow.
• getCurrentSlideIndex(): Returns the index of the current slide, starts with zero.
• getCurrentSlide(): Returns the DOM element of the current slide.
• getNextIndex(): Returns the index of the next slide, starts with zero.
• getNextSlide(): Returns the DOM element of the next slide.
• getPreviousIndex(): Returns the index of the previous slide, starts with zero.
• gotoSlide(index , skipDelay): Switch to the specified slide.
  
  Paramaters:
  (integer) index: The index of the desired slide, starts with zero.
  (boolean) skipDelay: If skipDelay is true, slider skips the slide showing delay and shows next slide immediately.
• getSlideList(): Returns an array of all slides.
• delayProgress(): Returns a value that indicates how long is past from showing delay.

Using the API

To run one of the above API command, you have to own a valid reference of the Cute Slider object. You can access the API with "slider.api" or "event.target" if you are using it in a callback function.

Example: slider.api.pause();

This will pause the slideshow.

Callback functions and Cute Slider API

Most of the cases you need to use both the callback functions and the Cute Slider API. Fortunately, there is an easy way to combine them. If you specify an "event" named parameter in the function header of a callback, it will be filled with all the enviroumental data you need, including a reference of the Cute Slider object. You can use the API methods via the "target" object variable. Below there is an easy example which will alert the user with the number of the next slide when the slider finished a slide change. To do that, we used the "Cute.SliderEvent.CHANGE_END" event and the following callback function:

function(event) {
	alert('The next slide is: '+(event.target.getNextIndex()+1)+'');
}