我正在尝试使用 jssor 过渡库让我的图像与缩略图导航器一起显示。
我看过他们的演示并尝试更改一些设置以更改导航栏在垂直模式下的宽度,但我似乎无法针对其中的空白区域。
我所做的一切都会更改缩略图本身的图像大小,即使使用 chrome 开发人员工具获取元素,我也无法更改元素的宽度。
我附上了一张图片来说明我对空白空间的意思。
操作此导航栏宽度的正确方法是什么,以便我可以停止在缩略图周围出现黑色空间?
我正在尝试使用 jssor 过渡库让我的图像与缩略图导航器一起显示。
我看过他们的演示并尝试更改一些设置以更改导航栏在垂直模式下的宽度,但我似乎无法针对其中的空白区域。
我所做的一切都会更改缩略图本身的图像大小,即使使用 chrome 开发人员工具获取元素,我也无法更改元素的宽度。
我附上了一张图片来说明我对空白空间的意思。
操作此导航栏宽度的正确方法是什么,以便我可以停止在缩略图周围出现黑色空间?
请更改缩略图导航器元素的大小,
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">
有一些选项可以完成这项工作,例如 $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
}
我明白你的意思。
请注意,滑块带有“外部容器”、“幻灯片容器”和“缩略图导航器容器”。“幻灯片容器”和“缩略图导航器容器”位于“外部容器”中。
你说得对。接下来你只需要调整“外部容器”的大小,并调整“幻灯片容器”的位置