Jssor Slider 如何将箭头添加到缩略图图库

Question

我正在尝试使用这个图片库：

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

如何将左右箭头导航添加到上面的缩略图滑块，就像这个演示一样：

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

Answer 1

Thumbnail navigator也是一种slider，可以为thumbnail navigator添加arrow 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 -->

查看此演示 http://www.jssor.com/testcase/image-gallery.source.html

编辑：

您可以调整$Align值来设置缩略图的偏移位置。

Github 存储库：https://github.com/jssor/slider

js代码中的'$'是一种压缩标记。

Jssor Slider 如何将箭头添加到缩略图图库

Jssor Slider how to add arrows to thumbnail image gallery

html

javascript

css

jquery

jssor