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

我的代码：http://codepen.io/Limpuls/pen/pRbZKe

Answer 1

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

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

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

你的包装被推得太远，根据图像的数量可能会更多，你必须以某种方式隐藏溢出。

jQuery滑块给我滚动条

1 个答案: