Question

我正在尝试使用jssor过渡库让我的图像显示缩略图导航器。

我已经看过他们的演示并尝试更改某些设置以在垂直模式下更改导航栏的宽度，但我似乎无法定位其内部的空白区域。

我所做的一切都会改变缩略图本身的图像大小，即使在使用chromes开发人员工具获取元素时，我也无法改变元素的宽度。

我附上了一张图片，以显示我对空白区的意思。

操纵此导航栏宽度的正确方法是什么，以便我可以停止缩略图周围的黑色空格？

Answer 1

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

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

Answer 2

有一些选项可以完成这项工作，例如$ 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
            }

Answer 3

我明白你的意思。

请注意，滑块位于＆＃39;外部容器＆＃39;，＆＃39;幻灯片容器＆＃39;和＆＃39;缩略图导航器容器＆＃39;。＆＃39;滑动容器＆＃39;和＆＃39;缩略图导航器容器＆＃39;位于＆＃39;外部容器中。

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

如何更改jssor thumbnail导航器的宽度

3 个答案: