Question

我正在尝试使用此图片库：

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

如何将左箭头和右箭头导航添加到相同的缩略图滑块上，如此演示：

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

Answer 1

缩略图导航器也是一种滑块，您可以为缩略图导航器添加箭头导航器。

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

＆＃39; $＆＃39;在js代码中有一种压缩标记。

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

1 个答案: