jssor 滑块缩略图位置答案

【问题标题】：jssor slider thumbnail positionjssor 滑块缩略图位置
【发布时间】：2015-04-17 21:29:41
【问题描述】：

我有一个网站，它的 Jssor 滑块下方有一排水平的缩略图（使用 jssor 滑块缩略图导航器皮肤 07）。据我所知，缩略图导航器中每个缩略图 div 的左侧定位 CSS 是由 javascript 动态插入的。

缩略图分区 1 CSS

element.style {
    width: 202px;
    height: 102px;
    top: 0px;
    left: 0px;
    position: absolute;
    overflow: hidden;
    transform: perspective(2000px);
}

缩略图分区 2 CSS

element.style {
    width: 202px;
    height: 102px;
    top: 0px;
    left: 217px;
    position: absolute;
    overflow: hidden;
    transform: perspective(2000px);
}

缩略图分区 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 分配的像素数量或左定位百分比，以便新大小的缩略图适合我的滑块。

【问题讨论】：

标签： javascript css jssor

【解决方案1】：

缩略图会自动生成，所有的缩略图都会放在缩略图导航器容器的中心。

但实际上，它是完全可定制的。

首先，您可以调整缩略图导航器容器的布局（大小/位置）。

<!-- 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

【讨论】：

谢谢，但我不是在问如何调整缩略图导航器容器的大小和位置。我在问如何自己调整缩略图的位置。在我上面的代码示例中，它显示每个缩略图从 javascript 动态接收不同的左侧位置（随着每个缩略图的位置远离左侧而变大）。我想知道如何在脚本中调整这个值或方程。现在，缩略图 div 的位置太远了，我希望它们靠得更近。

【解决方案2】：

感谢您尝试提供帮助，但 $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 -->

【讨论】：