如何創建一個Tiny水平滾動條來逐個顯示圖像？

我使用Tiny Scrollbar Plugin來製作一個小型的水平滾動條，通過Media Queries的幫助，在縮小的768像素的窗口大小中顯示一個div內的一串圖像。當我運行上面的代碼並將窗口大小縮小到768像素時，我的圖像顯示在一行中，但不幸的是我沒有得到任何水平滾動條來滾動圖像。我不知道我在做錯什麼。誰能告訴如何得到一個小水平滾動條如何創建一個Tiny水平滾動條來逐個顯示圖像？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#scrollbar1').tinyscrollbar({ axis: 'y' }); 
     }); 
    </script> 
    <style> 
     .overview 
     { 
      white-space: nowrap; 
     } 
     #scrollbar1 
     { 
      width: 100%; 
      margin: 20px 0 10px; 
     } 
     #scrollbar1 .viewport 
     { 
      width: 100%; 
      height: 200px; 
      overflow: hidden; 
      position: relative; 
     } 
     #scrollbar1 .overview 
     { 
      list-style: none; 
      position: absolute; 
      left: 0; 
      top: 0; 
      padding: 0; 
      margin: 0; 
      width: 100%; 
     } 
     #scrollbar1 .scrollbar 
     { 
      position: relative; 
      background-position: 0 0; 
      float: right; 
      width: 15px; 
     } 
     #scrollbar1 .track 
     { 
      background: height: 100%; 
      width: 15px; 
      position: relative; 
     } 
     #scrollbar1 .thumb 
     { 
      background-color: #e0d8b8; 
      border-radius: 4px; 
      height: 20px; 
      width: 8px; 
      cursor: pointer; 
      overflow: hidden; 
      position: absolute; 
      top: 0; 
      left: -5px; 
     } 
     #scrollbar1 .thumb .end 
     { 
      background-color: #e0d8b8; 
      border-radius: 4px; 
      overflow: hidden; 
      height: 20px; 
      width: 8px; 
     } 
     #scrollbar1 .disable 
     { 
      display: none; 
     } 


     @media screen and (max-width: 768px) 
     { 
      .overview 
      { 
       white-space: nowrap; 
       display: inline; 
      } 
     } 

    </style> 
</head> 
<body>  
    <div id="scrollbar1"> 
     <div class="scrollbar"> 
      <div class="track"> 
       <div class="thumb"> 
        <div class="end"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="viewport"> 
      <div class="overview"> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
      </div> 
     </div> 
    </div>  
</body> 
</html>

來源

2013-12-13 Jagan Mohan

我會建議切換到bxslider，如果你不介意。

Here是一個簡單的例子。（忽略圖像周圍的白色邊框）。你應該看看選項頁面，這個滑塊是高度可配置的。

你唯一的缺點是缺少水平滾動條。但滑塊是充分響應，所以沒有必要寫媒體查詢等

但是，備份到你的代碼，嘗試重新加載tinyscrollbar的窗口大小調整。如果寬度因媒體查詢而發生變化，則這是必須的。

$(window).resize(function() { 
    // reload your tinnyscrollbar again 
});

來源

2014-02-01 21:44:28

如何創建一個Tiny水平滾動條來逐個顯示圖像？

回答

相關問題