Development
Develop Jssor Slider
1. Standard Format
<script src="jssor.slider.min.js"></script>
<script>
    jssor_slider1_init = function (containerId) {
                            var options = {
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div>
            <img data-u="image" src="image1.jpg" />
                            <img data-u="thumb" src="thumb-image1.jpg" />
        </div>
        <div><img data-u="image" src="image2.jpg" /></div>
    </div>
    <!-- ThumbnailNavigator Skin Begin -->
        <!-- open 'skin\thumbnail-...source.html', copy and paste thumbnail navigator skin here -->
    <!-- ThumbnailNavigator Skin End -->
    <!-- Trigger -->
    <script>jssor_slider1_init('slider1_container');</script>
</div>
Ad
2. jQuery Format

<script src="jquery.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div>
            <img data-u="image" src="image1.jpg" />
            <img data-u="thumb" src="thumb-image1.jpg" />
        </div>
        <div><img data-u="image" src="image2.jpg" /></div>
    </div>
    <!-- ThumbnailNavigator Skin Begin -->
        <!-- open 'skin\thumbnail-*.html', copy and paste thumbnail navigator skin here -->
    <!-- ThumbnailNavigator Skin End -->
</div>
Tip: adjust thumbnail navigator size and position
#1. Set thumbnail navigator position/size, set thumbnail item size
<!-- Thumbnail Navigator Skin Begin -->
    ...
    <!-- thumbnail navigator container -->
    <div data-u="thumbnavigator" class="jssort01"
        style="width: 800px; height: 100px; left:0px; bottom: 0px;">
        <!-- Thumbnail Item Skin Begin -->
        <div data-u="slides">                                
            <div data-u="prototype" class="p" style="width:200px;height:100px;">
                <div class=w><div data-u="thumbnailtemplate" class="t"></div></div>
                <div class=c></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
<!-- Thumbnail Navigator Skin End -->


#2. In addition, you can use attribute to control scale ratio of position.
<div data-u="thumbnavigator" ...
                            data-autocenter="1" data-scale-bottom="0.75">
    ...
                            
    <!--                                      
                            data-autocenter: 1: horizontal, 2:vertical
                            data-scale-bottom:
            1: scale bottom position of element at the same ratio of slider
            0: no scale
            0.1-0.9: scale smarter                                      
            Default value is 1
    -->
... </div>