JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://raw.githubusercontent.com/lukehaas/Scrollify/master/jquery.scrollify.min.js"></script>
<section class="section">
    <div class="slideshow royalSlider1">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section class="section">
    <div class="slideshow royalSlider2">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section class="section">
    <div class="slideshow royalSlider3">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

JavaScript

$(function() {
// Scrollify (snap to section)
    $.scrollify({
        section : ".section",
        easing: "easeOutExpo",
        scrollSpeed: 1000,
        scrollbars: true,
        before:function() {},
        after:function(index) {
        	if(index == 1){
             //init your royalslider1
             //var NFG = {};
             //if ($('.royalslider1').children().length > 0) {
             //       this.slider();
              //  }
          }
          if(index == 2){
             //init your royalslider2
             //var NFG = {};
             //if ($('.royalslider2').children().length > 0) {
             //       this.slider();
              //  }
          }
        }
    });

    $(".scroll-down").click(function(e) {
        e.preventDefault();
        $.scrollify.next();
    });
});