Basic Usage (jQuery) Basic Usage (No-jQuery) Define Slides HTML Code Slider with Loading Screen (jQuery) Slider with Loading Screen (No-jQuery) Slider with Bullet Navigator (jQuery) Slider with Bullet Navigator (No-jQuery) Slider with Arrow Navigator (jQuery) Slider with Arrow Navigator (No-jQuery) Slider with Thumbnail Navigator (jQuery) Slider with Thumbnail Navigator (No-jQuery) Slider with Slideshow (jQuery) Slider with Slideshow (No-jQuery) Slider with Fixed/Static Element (e.g. QR code) Pass html Validation (against w3c standards) Reference - Options Reference - UI Definition Reference - API Tip - Arrange Layout & Adjust Size Tip - Make Responsive Slider Tip - Make Best Performance Slider Tool - Slideshow Transition Viewer
Thumbnail Navigator is thumbnail index of slides, it enables user navigate to specified slide, also indicates index of current slide.
Jssor Slider comes with 30+ professional themes, user can copy thumbnail navigator skin from any of 30+ themes (look for 'skin\thumbnail-*.source.html' in the download package).
Slider with Thumbnail Navigator (jQuery)
1. Javascript Code
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>
Reference: Thumbnail Navigator Options
Ad
2. HTML code
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div>
            <img u="image" src="image1.jpg" />
            <img u="thumb" src="thumb-image1.jpg" />
        </div>
        <div><img 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 -->
</div>
Tip: adjust thumbnail navigator size and position
#1. Adjust thumbnail navigator position/size with css
<!-- Thumbnail Navigator Skin Begin -->
    ...
    <!-- thumbnail navigator container -->
    <div u="thumbnavigator" class="jssort01"
        style="width: 800px; height: 100px; left:0px; bottom: 0px;">
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides" style="cursor: move;">
            <div u="prototype" class="p">
                <div class=w><div u="thumbnailtemplate" class="t"></div></div>
                <div class=c></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
<!-- Thumbnail Navigator Skin End -->
Reference: Thumbnail Navigator UI Definition

#2. In Addition, you can use option to auto center thumbnail items in thumbnail navigator container
<script>
    jQuery(document).ready(function ($) {
        var options = {
            ...
            $ThumbnailNavigatorOptions: {
                ...
                //[Optional] Auto center thumbnail items in the
                //thumbnail navigator container
                //, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
                $AutoCenter: 1,
                ...
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>
Reference: Thumbnail Navigator Options

See also Thumbnail Navigator with Slider Maker