jQuery滑塊給我滾動條

Question

夥計們。試圖創建我自己的畫廊滑塊。但我不知道如何防止滾動條。我知道我在包裝和圖像上都有overflow: visible，但是如果我製作了hidden，那麼我將看不到圖像，它們會被裁剪掉。這裏最好的選擇是什麼？謝謝。

<div id="wrapper" class="slider"> 


    <img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img> 



    <img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-apple-elephant"></img> 



    <img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-animal-protect"></img> 

    <img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img> 

<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img> 

    <img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img> 


</div> 


#wrapper { 
    text-align: left; 
    display: inline-block; 
    /*background-color: */; 
    white-space: nowrap; 
    position: relative; 
    left: -1150px; 
    overflow: visible; 
} 

#wrapper img { 
    margin-left: 20px; 
    white-space: nowrap; 
    overflow: visible; 
} 


var currentSlide = 2; 
var slider = $(".slide"); 

     setInterval(function() { 
     $(".slider").animate({position: "relative", left: "+=400px"}, 2000, function() { 
      currentSlide++; 
      /*$("#wrapper").css("overflow", "hidden");*/ 
      if (currentSlide === (slider.length - 1)) { 
      currentSlide = 1; 

      $(".slider").css("left", "-1150px"); 

      } 


     }); 
     }, 5000); 

我codepen：（？並且實際上經常（總是）使用時，你有這種類型的滑塊）http://codepen.io/Limpuls/pen/pRbZKe

Answer 1

最簡單的解決方案是添加更多的格作爲容器，設定爲100％（期望的）寬度，並添加溢出隱藏到它：

#container { 
    width:100%; //if 100%, you can even remove this line, 100% is default width 
    overflow:hidden; 
} 

演示：http://codepen.io/anon/pen/YNWjOM

您的包裝推離開太遠，並且可以甚至更多，取決於n圖像的數量，你必須以某種方式隱藏溢出。