☰
Documentation

Methods

What is a method?

Methods are Slidea actions which can be used for the current instance of the slider. Methods are perfect for custom slider functionality, such as custom buttons, thumbnails or triggering events.

The setup method

The first method we’re covering is the setup methods which we use to initialize a chose layout. Considering Slidea is already cached, initializing the layout means rearranging our slides and images using the layouter class.

To call the setup method, we’ll need to use the following code:

$('.slidea').data('slidea').setup()

The resize method

The resize method will resize and reposition the slider with its layers manually. This method is automatically called when the browser window gets resized.

To call the resize method, we’ll need to use the following code:

$('.slidea').data('slidea').resize()

The next slide method

This method will cause the slider to transition to the next slide.

To call the next method, we’ll need to use the following code:

$('.slidea').data('slidea').next()

The prev slide method

This method will cause the slider to transition to the previous slide.

To call the prev method, we’ll need to use the following code:

$('.slidea').data('slidea').prev()

The slide method

This method will cause the slider to transition to the slide you specify. Take into account that the slide counter goes from 0 to n-1, where n is the total number of slides.

To call the slide method, we’ll need to use the following code:

var to = 3;
$('.slidea').data('slidea').slide(to);

The addSlide method

As of version 2.1.0, you can add slides during runtime to an existing Slidea slider. You will need to provide the index where you want to insert the slide (the index starts from 0) and the slide animation and creation data.

The slide’s creation data model is the same as the one from the Slide Setup Data article.

var index = 0;
var data = {
  image: "/img/templates/base/slide-1.jpg",
  background: {
    0: {
      duration: 500,
      initial: "opacity 0, scale 3",
      out: "opacity 0, scale 0"
    }
  }
};

$('#slidea').data('slidea').addSlide(index, data);

The addLayer method

You can add new layers to slides during runtime to an existing Slidea slider. You will need to provide the slide index where you want to insert the layer and the index of the layer where you want it inserted (the index starts from 0) and the layer animation and creation data.

The layer’s creation data model is the same as the one from the Slide Setup Data article.

var slideIndex = 0;
var layerIndex = 0;
var layerData = {
  image: "/img/templates/base/slide-1.jpg",
  top: 100,
  left: 100,
  start: 600,
  width: 480,
  height: 240,
  duration: 500,
  initial: "opacity 0, scale 3",
  out: "opacity 0, scale 0",
  1200: "scale 2"
  1800: "scale 1"
};

$('#slidea').data('slidea').addLayer(slideIndex, layerIndex, layerData);

Adding HTML Layers is just as simple. You only need to replace the image key with the html key in the initialization data.

var slideIndex = 0;
var layerIndex = 0;
var layerData = {
  html: "<h1>I love slidea!</h1>",
  top: 100,
  left: 100,
  start: 600,
  width: 480,
  height: 240,
  duration: 500,
  initial: "opacity 0, scale 3",
  out: "opacity 0, scale 0",
};

$('#slidea').data('slidea').addLayer(slideIndex, layerIndex, layerData);

The addObject method

You can add new object to slides by specifying to which slide you’re going to add the object, the target to which the object will be appended and the HTML of the object.

The object’s creation data model is the same as the one from the Slide Setup Data article.

var slideIndex = 0;
var objectData = {
  html: "<h1>I love slidea!</h1>",
  target: ".slidea-content-container"
  start: 600,
  mode: "append", // append, prepend, before, after
  duration: 500,
  initial: "opacity 0, scale 3",
  out: "opacity 0, scale 0",
};

$('#slidea').data('slidea').addObject(slideIndex, objectData);

The removeSlide method

You can remove slides at runtime by calling the removeSlide method and providing the index of the slide (the index starts from 0).

var slideIndex = 0;
$('#slidea').data('slidea').removeSlide(slideIndex);

The removeLayer method

You can remove layers at runtime by calling the removeLayer method and providing the index of the slide (the index starts from 0) and the index of the layer you want to remove.

var slideIndex = 0;
var layerIndex = 0;
$('#slidea').data('slidea').removeLayer(slideIndex, layerIndex);

The removeObject method

You can remove objects at runtime by calling the removeObject method and providing the index of the slide (the index starts from 0) and the index of the object you want to remove.

var slideIndex = 0;
var objectIndex = 0;
$('#slidea').data('slidea').removeObject(slideIndex, objectIndex);
Previous
Events
Read Next
Sources