jssor slider thumbnail position

Question

Ho un sito che ha il cursore Jssor con una fila orizzontale di miniature sotto di esso (usando jssor slider thumbnail navigator skin 07). Per quanto posso dire il CSS di posizionamento sinistro di ogni div thumbnail nel thumbnavigator viene inserito dinamicamente dal javascript.

Thumbnail Div 1 CSS

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

Thumbnail Div 2 CSS

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

Thumbnail Div 3 CSS

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

Ho modificato la dimensione delle miniature usando il mio CSS ma il posizionamento rimane lo stesso perché ogni div viene generato dinamicamente senza un singolo CSS cla ss o ID per me riferimento. Quindi, se sovrascrivo il posizionamento a sinistra del CSS, lo fa per tutte le div thumbnail e si impilano l'uno sull'altro.

Mi piacerebbe scoprire che cosa ho bisogno di modificare (in javascript o CSS) per cambiare la quantità di pixel o la percentuale di posizionamento sinistro che ogni div thumbnail è stato assegnato così le miniature di nuova dimensione si adattano al mio cursore.

Answer 1

Apprezzo il tentativo di fare a meno del $ SpacingX e $ SpacingY non ha aiutato nel mio caso. Esiste una sezione del file ascx con una larghezza hardcoded. Quando l'ho modificato, sono stato in grado di vedere tutte le anteprime e posizionarle di conseguenza:

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

Le miniature verranno generate automaticamente e tutte le anteprime verranno posizionate al centro del contenitore del navigatore delle miniature.

Ma in realtà, è completamente personalizzabile.

Innanzitutto, è possibile regolare il layout (dimensione/posizione) del contenitore del navigatore delle miniature.

<!-- thumbnail navigator container --> 
<div u="thumbnavigator" class="jssort07" style="left: 0px; bottom: 0px; width: 800px; height: 100px;"> 
    ... 
</div> 
<!--#endregion Thumbnail Navigator Skin End --> 

E inoltre è possibile inserire il contenitore di navigazione in miniatura in un wrapper tutto tuo che è completamente personalizzabile.

<div style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;> 
    <div u="thumbnailnavigator" ...> 
     ... 
    </div> 
</div> 

Edit:

$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 
    ... 
} 

Riferimento: http://www.jssor.com/development/reference-options.html#thumbnailNavigatorOptions