CSS

Question

我试图改变jquery skitter幻灯片的宽度和高度。它的默认大小是宽度800px和高度300px。我需要宽度960px和高度330px。我的自定义尺寸仅在我点击下一个按钮时出现。如果有人能解决我的问题，我将感激不尽。

 <script type="text/javascript" language="javascript">
     $(document).ready(function() {
         $('.box_skitter_large').skitter({
             theme: 'clean',
             numbers_align: 'center',
             progressbar: true, 
             dots: true, 
             preview: true
         });
     });
 </script>

 <div class="box_skitter box_skitter_large">
     <ul>
         <li> <img src="img/example/001.jpg" width="960px" height="330px" class="circles" /> </li>
         <li> <img src="img/example/002.jpg" width="960px" height="330px" class="circlesInside" /> </li>
         <li> <img src="img/example/003.jpg" width="960px" height="330px" class="circlesRotate" /> </li>
         <li> <img src="img/example/004.jpg" width="960px" height="330px" class="cubeShow" /> </li> 
     </ul>
 </div>

CSS

 .box_skitter { position: relative; width: 960px;   height: 330px;  background: #FFFFFF;}
 .box_skitter img { max-width: none;} .box_skitter ul { display: none;}
 .box_skitter .container_skitter {  overflow: hidden;   position: relative;}
 .box_skitter .image {  overflow: hidden;}
 .box_skitter .image img {  display: none;}
 .box_skitter .box_clone {  position: absolute; top: 0; left: 0;    width: 100px;   display: none;  z-index: 220;}
 .box_skitter .box_clone img {  position: absolute; top: 0; left: 0;    z-index: 20;}
 .box_skitter .prev_button {    position: absolute; top: 50%; left: 35px; z-index: 152; width: 42px; height: 42px;  overflow: hidden; text-indent: -9999em; margin-top: -25px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}
 .box_skitter .next_button {    position: absolute; top: 50%;   right: 35px;    z-index: 152;   width: 42px;    height: 42px;   overflow: hidden;   text-indent: -9999em;   margin-top: -25px;  -webkit-transition: all 0.2s;   -moz-transition: all 0.2s;  transition: all 0.2s;}
 .box_skitter .prev_button:hover, .box_skitter .next_button:hover { opacity: 0.5 !important;}
 .box_skitter_large {   width: 960px;   height: 330px border_box 0px;}
 .box_skitter_small {   width: 100px;   height: 100px;}

Answer 1

试试这个：

.container_skitter {
    width:1132px;
    height:357px;
}

.box_skitter {
    width:1132px;
    height:357px;
}

.box_skitter img {
    width: 1132px;
    height:357px;
}

Answer 2

.box_skitter {
  heitgh: 100%;
  min-height: 100px;
}

阻止.box_skitter自动调整调整（在我的情况下，高度单位变为173px）

如何改变jQuery Skitter Slideshow的宽度和高度？

CSS

2 个答案: