Skip to main content

Dynamically add and remove slides

Side note: If you wish to change all slides at once please check this article.

First of initialize slider as usual with starting slides and save it's object.

var sliderInstance = $('.royalSlider').royalSlider({
   optionname: 'optionvalue'
}).data('royalSlider');

Adding slide​

There is appendSlide public method, it accepts two parameters - html slide object, and optional index where slide should be added. If you don't pass index, slide will be added to the end.

// Adding simple slide after 3rd image:
sliderInstance.appendSlide('<a class="rsSlide" href="image.jpg"></a>', 3);

// Adding slide to the end:
sliderInstance.appendSlide('<div>Some another slide content...</div>');

Removing slide​

There is removeSlide public method. It accepts one parameter - index of slide that should be removed.

// remove 5th slide:
sliderInstance.removeSlide(4);

Alternative syntax​

You may use jQuery-like syntax to add or remove slides, but it's a little slower.

$('.royalSlider').royalSlider('appendSlide', '<a class="rsSlide" href="image.jpg"></a>', 3);

Known issues​

It's recommended to disable loop option if you will be adding and removing slides. It will work correctly, but may cause "flickering", especially on mobile devices.