聲明：本文由w3h5原創，轉載請注明出處：《SuperSlide輪播插件滾動高度或寬度不對的問題解決》
SuperSlide 是一款比較實用的輪播插件，網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動”“無縫滾動”等都能實現，兼容包括 IE6 的絕大部分瀏覽器。
但是作者寫的教程復雜難懂，有時需要摸索好久才能實現效果。
問題描述：
而且會存在一些問題，沒有考慮到。今天就遇到一個問題，輪播的滾動距離出現偏移。
問題原因：
因為 SuperSlide 初始化后會自動計算（重置）li 的寬度和高度（左右滑動是寬度，上下滾動是高度）。所以 li 不能有padding 屬性值和 border 屬性值。
注：有人說也不能有 margin 值，博主試了一下，設置 margin 好像沒什么問題。
我給所有元素設置了怪異盒模型結構 box-sizing: border-box; 所以出現上面的偏移問題。
如果是標准盒模型，會是以下效果。
那么不給 li 設置邊距，怎么調整它的樣式呢？
解決辦法：
我們可以在 li 標簽內再套一個 div 給 div 設置邊距，這樣就不會出現偏移問題了。
代碼示例：
HTML：
<div class="slideTxtBox"> <div class="bd"> <ul> <li> <img src="banner1.jpg" alt=""> </li> <li> <img src="banner2.jpg" alt=""> </li> <li> <img src="banner3.jpg" alt=""> </li> <li> <img src="banner4.jpg" alt=""> </li> </ul> </div> </div>
CSS：
.slideTxtBox{ width: 700px; padding: 20px; border: 2px solid #0a67fb; overflow: hidden; } .slideTxtBox ul li{ width: 200px; margin: 10px; } .slideTxtBox ul li div{ height: 300px; padding: 10px; border-radius: 50px; overflow: hidden; height: 100%; } .slideTxtBox ul li img{ width: 100%; }
JS：
<script> jQuery(".slideTxtBox").slide({ mainCell: ".bd ul", autoPage: true, effect: "left", autoPlay: true, vis: 3 }); </script>