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

Jssor Slider how to add arrows to thumbnail image gallery

本文关键字：略图 添加 Slider Jssor      更新时间：2023-09-26

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

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

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

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

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

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代码中的"$"是一种压缩标记。

相关文章：