Jssor Slider Maker horizontal template; previews not scrolling javascript error

Question

I am working with Jssor Slider Maker and using the vertical preview template where you have two columns on the left side and the maximized image on the right side. From the developers pack, when you go to pull the code, it gives you the scripts, the CSS and the HTML in a single file. Since I am incorporating that information into my own site, I have naturally taken those and split them into a css file, a javascript file and then incorporated the html into my page. However, in doing so , I have lost a function along the way - the preview images no longer scroll. That means many are hidden and can not be clicked. What am I missing?

https://codepen.io/anon/pen/ajrbrj

 `<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: https://www.jssor.com -->

<div class="col-sm-12 img-slider-container">
            <header class="section-header wow fadeInUp">
      <h3>More Information</h3>
      <p>.</p>
    </header>

<div id="jssor_1" class="img-slider-wrapper">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-009-spin img-slider-loading" >
        <img src="img-slider/img/spin.svg">
    </div>
    <div data-u="slides" class="img-slider-slider-wrapper">
        <div>
            <img data-u="image" src="img-slider/img/1.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/1.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/2.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/2.jpg" alt="" />
        </div>
        <div>
            <img data-u="image" src="img-slider/img/3.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/3.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/4.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/4.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/5.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/5.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/6.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/6.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/7.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/7.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/8.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/8.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/9.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/9.jpg" alt=""/>
        </div>
        <!--<div>
            <img data-u="image" src="img-slider/img/10.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/10.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/11.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/11.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/12.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/12.jpg" alt=""/>
        </div>
        <div>
            <img data-u="image" src="img-slider/img/13.jpg" alt=""/>
            <img data-u="thumb" src="img-slider/img/reduced/13.jpg" alt=""/>
        </div>-->
    </div>
    <!-- Thumbnail Navigator -->

    <div data-u="thumbnavigator" class="jssort101 img-slider-navigator" data-autocenter="2" data-scale-left="0.75">
        <div data-u="slides">
            <div data-u="prototype" class="p img-slider-protoype">
                <div data-u="thumbnailtemplate" class="t"></div>
                <svg viewbox="0 0 16000 16000" class="cv">
                    <circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
                    <line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
                    <line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
                </svg>
            </div>
        </div>
    </div>
    <!-- Arrow Navigator -->
    <div data-u="arrowleft" class="jssora093" style="width:50px;height:50px;top:0px;left:270px;" data-autocenter="2">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <circle class="c" cx="8000" cy="8000" r="5920"></circle>
            <polyline class="a" points="7777.8,6080 5857.8,8000 7777.8,9920 "></polyline>
            <line class="a" x1="10142.2" y1="8000" x2="5857.8" y2="8000"></line>
        </svg>
    </div>
    <div data-u="arrowright" class="jssora093" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <circle class="c" cx="8000" cy="8000" r="5920"></circle>
            <polyline class="a" points="8222.2,6080 10142.2,8000 8222.2,9920 "></polyline>
            <line class="a" x1="5857.8" y1="8000" x2="10142.2" y2="8000"></line>
        </svg>
    </div>
</div>
    </div>
<script type="text/javascript">jssor_1_slider_init() </script>
<!-- #endregion Jssor Slider End -->



` 

Answer 1

The order of code is wrong in your demo. You can check frame source of the codepen demo.

The correct order is as below,

1. html code

2. jssor.slider.min.js

3.

    jssor_1_slider_init = function() {
    };

4.

    jssor_1_slider_init();