Skip to main content

Replacing all slides dynamically

If you need to change all slides in your gallery completely, it's more efficient to destroy old one and initialize new than using appenSlide/removeSlide methods.

Thanks to jQuery chaining, there is very elegant solution how to do this. Assuming that you already have initialized slider with css selector .royalSlider on your page.

jQuery('.royalSlider').royalSlider('destroy').empty().royalSlider({
   slides: '<div>New slide 1</div><div>New slide 2</div>',
   // other options... for example:
   controlNavigation: 'bullets'
});

What this code does:

  1. Destroys old slider instance
  2. Cleans up all elements inside .royalSlider.
  3. Initializes new one with new slides that are passed through slides option.

As you probably already understood instead of <div>New slide 1</div> you should put HTML markup for first slide, <div>New slide 2</div> for second e.t.c.