JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://img.hiamovi-client.com/royalslider/royalslider.css">
<script src="http://img.hiamovi-client.com/royalslider/dev/jquery.royalslider.js"></script>
<!-- Nothing to change here -->
<div class="royalSlider rsDefault">
    <div class="rsContent cover" id="sl0">
        I am the main content #sl0
        <br> <span class="button out">Trigger Sub Slide</span>
    </div>
    <div class="rsContent cover" id="sl1">
        I am the main content #sl1
        <br> <span class="button out">Trigger Sub Slide</span>
    </div>
    <div class="rsContent cover" id="sl2">
        I am the main content #sl2
        <br> <span class="button out">Trigger Sub Slide</span>
    </div>
    <div class="rsContent cover" id="sl3">
        I am the main content #sl3
        <br> <span class="button out">Trigger Sub Slide</span>
    </div>
</div>
<!--.royalSlider-->

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.royalSlider {
  height: 100%;
  width: 100%;
}
/* Just for the navigation demo */

#navigation {
  position: absolute;
  top: 10%;
  right: 10px;
  z-index: 9999;
  list-style: none;
}

#navigation li {
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 5px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid transparent;
  padding: 9px 10px 11px;
  font-size: 14px;
  width: 14px;
  height: 14px;
}

#navigation li:hover {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
}
/* Just for demo purposes */

.rsContent {
  padding: 5%;
}

.cover {
  color: #fff;
  background: no-repeat center center;
  background-size: cover;
}

span.button {
  text-transform: uppercase;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  display: inline-block;
  margin-top: 15px;
  border-radius: 6px;
  border: 1px solid #fff;
}

span.button.in {
  background: red;
}

span.button:hover {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}

#sl0 {
  background-image: url('https://unsplash.it/800/1000/?image=555');
}

#sl1 {
  background-image: url('https://unsplash.it/800/1000/?image=603');
}

#sl2 {
  background-image: url('https://unsplash.it/800/1000/?image=601');
}

#sl3 {
  background-image: url('https://unsplash.it/800/1000/?image=594');
}

.sub {
  background: rgba(0, 0, 0, 0.1);
}

em {
  font-weight: normal;
  font-size: 12px;
  font-style: italic;
}

em b {
  font-weight: normal;
  font-style: normal;
}

span.close {
  font-weight: bold;
  display: block;
  position: absolute;
  top: 5%;
  color: red;
  right: 100px;
  font-size: 50px;
}

JavaScript

// This is the basic set up for the slider
var sliderInstance = $('.royalSlider').royalSlider({
    keyboardNavEnabled: true,
    controlNavigation: 'none',
    numImagesToPreload: 30,
    slidesOrientation: 'vertical',
    arrowsNav: false,
    navigateByClick: false,
    fadeinLoadedSlide: true, //?
    addActiveClass: true,
    minSlideOffset: 20,
}).data('royalSlider');


// This is the working code for the rest of the slider
$('#sl0 .button').on('click', function () {
    if($(this).toggleClass('out in').hasClass('in')) {
       //get current slide id & increase by 1
        var $sub_id = sliderInstance.currSlideId + 1;
        //append html slide
        sliderInstance.appendSlide('<div class="rsContent sub" id="sl0_sub"> Some Sub Content #sl0_sub<br><em>I should be hidden, until <b>$("#sl0 span.button")</b> is clicked.</em><span class="close">x</span></div>',$sub_id);
        sliderInstance.next();
        $('.close').on('click', function(){
            $('#sl0 .button').toggleClass('out in');
            sliderInstance.prev();
            setTimeout( function(){ 
                sliderInstance.removeSlide($sub_id);
              }  , 600 );
        });
    } else {
       var $sub_id_del = sliderInstance.currSlideId +1;
       sliderInstance.removeSlide($sub_id_del);
    }
});


$('#sl1 .button').on('click', function () {
    if($(this).toggleClass('out in').hasClass('in')) {
       //get current slide id & increase by 1
        var $sub_id = sliderInstance.currSlideId + 1;
        //append html slide
        sliderInstance.appendSlide('<div class="rsContent sub" id="sl1_sub"> Some Sub Content #sl1_sub<br><em>I should be hidden, until <b>$("#sl1 span.button")</b> is clicked.</em><span class="close">x</span></div>',$sub_id);
        sliderInstance.next();
        $('.close').on('click', function(){
            $('#sl1 .button').toggleClass('out in');
            sliderInstance.prev();
            setTimeout( function(){ 
               ...