Как создать крошечную горизонтальную полосу прокрутки для отображения изображений в очереди один за другим?

Я использую Tiny Scrollbar Plugin, чтобы сделать крошечную горизонтальную полосу прокрутки, чтобы отобразить кучу изображений внутри div в неломном одиночном слое в уменьшенном размере окна 768 px с помощью Media Queries. Когда я запускаю приведенный выше код и уменьшаю размер окна до 768 px, я отобразил свои изображения в одной строке, но, к сожалению, я не получаю горизонтальную полосу прокрутки для прокрутки изображений. Я не знаю, где я делаю неправильно. Может ли кто-нибудь сказать, как получить крошечную горизонтальную полосу прокруткиКак создать крошечную горизонтальную полосу прокрутки для отображения изображений в очереди один за другим?

<!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

Как создать крошечную горизонтальную полосу прокрутки для отображения изображений в очереди один за другим?

ответ

Смежные вопросы