Jssor Slider how to add arrows to thumbnail image gallery

Question

I am trying to use this image gallery:

http://www.jssor.com/demos/image-gallery.html

How can I add left and right arrows navigation to the thumbnail slider above the same like this demo:

http://www.jssor.com/demos/thumbnail-navigator-with-arrows.html

Answer 1

Thumbnail navigator is also a kind of slider, you can add arrow navigator for thumbnail navigator.

var options = {
    ...,
    $Align: 360,                          //[Optional] The offset position to park thumbnail
    $ThumbnailNavigatorOptions: {
        ...,

        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2,
            $Steps: 6                                       //[Optional] Steps to go for each navigation request, default value is 1
        }
    }
};

var jssor_slider1 = new $JssorSlider$(containerId, options);


<!-- Thumbnail Navigator Skin Begin -->
<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
    <!-- Thumbnail Item Skin Begin -->
    <style>
        /* thumbnail css here */
    </style>
    <div u="slides" style="cursor: move;">
        <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
            <div class=w><div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div></div>
            <div class=c>
            </div>
        </div>
    </div>
    <!-- Thumbnail Item Skin End -->

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* arrow css here */
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora11l" style="width: 37px; height: 37px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora11r" style="width: 37px; height: 37px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->

</div>
<!-- Thumbnail Navigator Skin End -->

See this demo http://www.jssor.com/testcase/image-gallery.source.html

Edit:

You can adjust $Align value to set offset position of thumbnails.

Github repository: https://github.com/jssor/slider

The '$' in the js code is kind of mark for compression.