我有一个网站,它下面有一排水平的缩略图(使用 jssor 滑块缩略图导航器皮肤 07)。 据我所知,拇指导航器中每个缩略图div的左侧定位CSS是由javascript动态插入的。
缩略图 Div 1 CSS
element.style {
width: 202px;
height: 102px;
top: 0px;
left: 0px;
position: absolute;
overflow: hidden;
transform: perspective(2000px);
}
缩略图 Div 2 CSS
element.style {
width: 202px;
height: 102px;
top: 0px;
left: 217px;
position: absolute;
overflow: hidden;
transform: perspective(2000px);
}
缩略图 Div 3 CSS
element.style {
width: 202px;
height: 102px;
top: 0px;
left: 434px;
position: absolute;
overflow: hidden;
transform: perspective(2000px);
}
我使用自己的 CSS 修改了缩略图的大小,但定位保持不变,因为每个div 都是动态生成的,没有单独的 CSS 类或 ID 供我参考。 因此,如果我覆盖 CSS 左侧定位,它会为所有缩略图div 执行此操作,并且它们只是堆叠在一起。
我想找出我需要编辑的内容(在 javascript 或 CSS 中)以更改每个缩略图div 分配的左侧定位的像素量或百分比,以便新大小的缩略图适合我的滑块。
缩略图将自动生成,所有缩略图都将放置在缩略图导航器容器的中心。
但实际上,它是完全可定制的。
首先,您可以调整缩略图导航器容器的布局(大小/位置)。
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort07" style="left: 0px; bottom: 0px; width: 800px; height: 100px;">
...
</div>
<!--#endregion Thumbnail Navigator Skin End -->
您还可以将缩略图导航器容器插入您自己的包装器中,该包装器是完全可定制的。
<div style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;>
<div u="thumbnailnavigator" ...>
...
</div>
</div>
编辑:
$ThumbnailNavigatorOptions: {
...,
$DisplayPieces: 5, //indicates how many columns to display
$Lanes: 1, //indicates how many rows to display
$SpacingX: 10, //indicates horizontal spacing
$SpacingY: 10, //indicates vertical spacing
...
}
参考: http://www.jssor.com/development/reference-options.html#thumbnailNavigatorOptions
我很感激帮助的尝试,但$SpacingX和$SpacingY对我的情况没有帮助。 .ascx 文件有一部分具有硬编码宽度。 当我编辑它时,我能够看到所有缩略图并相应地放置它们:
<!-- Thumbnail Navigator Skin Begin -->
<div u="thumbnavigator" class="jssort07" >
<div style="width: 100%; height:100%;"></div>
<!-- Thumbnail Item Skin Begin -->
<!-- width:160px; +10px for padding, + 30px for margin, +2px for border|| height:80px; + 10px for padding, +2 px for border + 10px for red arrow on hover -->
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="POSITION: absolute; WIDTH:150px; HEIGHT:102px; TOP: 1px; LEFT: 0;">
<thumbnailtemplate class="i" style="position:absolute;"></thumbnailtemplate>
<div class="o">
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->