Javascript jqueryslider提供了滚动条

伙计们。尝试创建我自己的图库滑块。但我不知道如何防止滚动条。我知道我在包装器和图像上都有

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);

#包装纸{
文本对齐：左对齐；
显示：内联块；
/*背景色：*/；
空白：nowrap；
位置：相对位置；
左：-1150px；
溢出：可见；
}
#包装机{
左边距：20px；
空白：nowrap；
溢出：可见；
}
var-currentlide=2；
变量滑块=$（“.slide”）；
setInterval（函数（）{
$（“.slider”）.animate（{position:“relative”，left:“+=400px”}，2000，函数（）{
currentSlide++；
/*$（“#包装器”）.css（“溢出”、“隐藏”）*/
如果（currentSlide==（slider.length-1））{
currentSlide=1；
$（“.slider”）.css（“左”，“-1150px”）；
}
});
}, 5000);

My codepen:

最简单的解决方案（当您使用这种类型的滑块时，实际上经常（总是？）使用）是再添加一个div作为容器，设置100%（所需）宽度，并向其添加溢出隐藏：

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

演示：

您的包装器被向左推得太远，可能会更多，这取决于图像的数量，您必须以某种方式隐藏溢出