2014-11-02 200 views
-1

我正在使用帶縮略圖導航器的Jssor圖像滑塊。 我一直在調整類和圖像的寬度和高度,但我沒有設法找到一種方法來爲每個縮略圖定義特定的寬度和高度。我不需要每個縮略圖的不同大小,但我想要使用的大小與演示不同jssor更改縮略圖寬度高度

非常感謝任何幫助。 我覺得挺難自定義此滑塊的大小和它的元素

回答

1

鑑於縮略圖導航(皮膚\縮略圖01.source.html)如下,

<!-- Thumbnail Navigator Skin Begin --> 
    <div u="thumbnavigator" class="jssort01" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;"> 

     <!-- Thumbnail Item Skin Begin --> 
     <style> 
      /* jssor slider thumbnail navigator skin 01 css */ 
      /* 
      .jssort01 .p   (normal) 
      .jssort01 .p:hover  (normal mouseover) 
      .jssort01 .pav   (active) 
      .jssort01 .pav:hover  (active mouseover) 
      .jssort01 .pdn   (mousedown) 
      */ 
      .jssort01 .w 
      { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 100%; 
       height: 100%; 
      } 
      .jssort01 .c { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 68px; 
       height: 68px; 
       border: #000 2px solid; 
      } 
      .jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c { 
       background: url(../img/t01.png) center center; 
       border-width: 0px; 
       top: 2px; 
       left: 2px; 
       width: 68px; 
       height: 68px; 
      } 
      .jssort01 .p:hover .c, .jssort01 .pav:hover .c { 
       top: 0px; 
       left: 0px; 
       width: 70px; 
       height: 70px; 
       border: #fff 1px solid; 
      } 
     </style> 
     <div u="slides" style="cursor: move;"> 
      <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;"> 
       <div class=w><thumbnailtemplate style="width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div> 
       <div class=c> 
       </div> 
      </div> 
     </div> 
     <!-- Thumbnail Item Skin End --> 
    </div> 
    <!-- Thumbnail Navigator Skin End --> 

您可以更改大小(68px,70px,72px)。