jssor滑塊縮略圖位置

Question

我有一個網站，它有一個水平行縮略圖下面的Jssor滑塊（使用jssor滑塊縮略圖導航皮膚07）。據我所知，thumbnavigator中每個縮略圖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 CSS的情況下動態生成的ss或ID供我參考。所以，如果我覆蓋CSS左邊的位置，它會爲所有的縮略圖div執行它們，並且它們疊加在一起。

我想找出我需要編輯的內容（在JavaScript或CSS中）以更改像素數量或左側定位的百分比，每個縮略圖div都被分配，以便新的縮略圖適合我的滑塊。

Answer 1

我感謝試圖幫助，但$ 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 --> 

Answer 2

縮略圖將自動生成，所有縮略圖將放置在縮略圖導航器容器的中心。

但實際上，它是完全可定製的。

首先，您可以調整縮略圖導航器容器的佈局（大小/位置）。

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