OK, I’ve seen many individuals struggling and totally different approaches on how to do that however I have been cracking my head and might’t get it completed.

I must implement this photograph gallery in a SPFx net half and apply it to a contemporary web page.

That is the concept:

<script sort="textual content/javascript" src="../lib/js/exterior/_oldies/jquery-1.3.min.js"></script>

<script sort="textual content/javascript" src="../lib/js/exterior/jquery.easing.1.3.min.js"></script>
<script sort="textual content/javascript" src="../lib/js/exterior/jquery.mousewheel.min.js"></script>

<script sort="textual content/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>

<script sort="textual content/javascript">
    $(window).load(operate() {

        $(".delaycaptions-01").sliderkit({
            round:false,
            mousewheel:false,
            keyboard:true,
            shownavitems:4,
            auto:false,
            panelfxspeed:500,
            delaycaptions:{
                delay:500, 
                place:'backside',
                transition:'sliding',
                period:300,
                easing:'easeOutExpo'
            }
        });
    }

</script>

<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-core.css" media="display, projection" />
<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-demos.css" media="display, projection" />
<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-site.css" media="display, projection" />


<div class="sliderkit photosgallery-captions delaycaptions-01">
    <div class="sliderkit-nav">
        <div class="sliderkit-nav-clip">
            <ul>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/pictures/photographs/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/pictures/photographs/mini/sample-02.jpg" alt="[Alternative text]" /></a></li>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/pictures/photographs/mini/sample-03.jpg" alt="[Alternative text]" /></a></li>
        </div>
        <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Earlier line"><span>Earlier line</span></a></div>
        <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Subsequent line"><span>Subsequent line</span></a></div>
        <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Earlier photograph"><span>Earlier photograph</span></a></div>
        <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Subsequent photograph"><span>Subsequent photograph</span></a></div>
    </div>
    <div class="sliderkit-panels">                      
        <div class="sliderkit-panel">
            <a href="../lib/pictures/photographs/sample-01.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/sample-01.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-01.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
        <div class="sliderkit-panel">
            <a href="../lib/pictures/photographs/sample-02.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/sample-02.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-02.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
        <div class="sliderkit-panel">
            <a href="../lib/pictures/photographs/sample-03.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/sample-03.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-03.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
    </div>
</div>

I’m making an attempt to do issues like this:

SPComponentLoader.loadScript('../lib/js/exterior/_oldies/jquery-1.3.min.js', 
    { globalExportsName: 'jQuery'}).then((jQuery: any): void => {
        SPComponentLoader.loadScript('../lib/js/exterior/jquery.easing.1.3.min.js', 
         { globalExportsName: 'easing' }).then((jQuery: any): void => {    
          SPComponentLoader.loadScript('../lib/js/exterior/jquery.mousewheel.min.js', 
           { globalExportsName: 'mousewheel' }).then((jQuery: any): void => {     
            SPComponentLoader.loadScript('../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js',
             { globalExportsName: 'sliderkit' }).then((jQuery: any): void => {
              SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js',
                { globalExportsName: 'counter' }).then((jQuery: any): void => {    
                SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js', 
                 { globalExportsName: 'imagefx' }).then((jQuery: any): void => {     
                  SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js',  
                  { globalExportsName: 'delaycaptions' }).then((jQuery: any): void => {      
                    jQuery(".delaycaptions-01").sliderkit({
                        round:false,
                        mousewheel:false,
                        keyboard:true,
                        shownavitems:4,
                        auto:false,
                        panelfxspeed:500,
                        delaycaptions:{
                            delay:500, // should be equal or greater than panelfxspeed
                            place:'backside',
                            transition:'sliding',
                            period:300, // should be much less equal or greater than panelfxspeed
                            easing:'easeOutExpo'
                        }
                    });


                  });    
                });    
              });
            });   
          });    
        });
      });

However that is so exhausting. And it might be really easy if I might do it a as a primary html web page…

That is the plugin web page:

http://www.stg-online.web/net/script/slider/sliderkit_en.html

Please assist