如何更改JSSOR缩略图导航器的宽度

Question

我正在尝试使用JSSOR转换库让我的图像用缩略图导航器显示。

我已经看到了他们的演示，并尝试改变一些设置，以改变导航栏的宽度，而其垂直模式，但我似乎无法瞄准它内部的空格。

我所做的一切都改变了缩略图本身的图像大小，即使获取具有晶体开发人员工具的元素，我不能更改元素的宽度。

我已附加了一个图像以显示我对空白空间的意思。

http://imgur.com/twslexs

如何操作该导航仪宽度的正确方法，以便我可以在缩略图周围停止在缩略图周围有黑色空间？

Answer 1

我完全得到了你的意思。

请注意，滑块与“外容容器”，“滑动容器”和“缩略图导航器容器”。 '幻灯片集装箱'和'缩略图导航器容器'处于“外部容器”中。

你有正确的东西。接下来，您只需要调整“外部容器”的大小，并调整“幻灯片容器”的位置

Answer 2

请更改缩略图导航器元素的大小，

<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">

.

Answer 3

有一些选项可以做到这项工作，如$ spacingx，$ spacingy，

            $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $Lanes: 2,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
                $SpacingX: 14,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                $SpacingY: 12,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                $Cols: 6,                             //[Optional] Number of pieces to display, default value is 1
                $Align: 156,                          //[Optional] The offset position to park thumbnail
                $Orientation: 2                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
            }

.