2014-11-02 148 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)。