slider - 简单画廊 slider

Question

我正在尝试使用 div 和 javascript 创建一个简单的 slider 。我设置了一个包含六个图像的 div 和一个箭头，每次单击它时，该箭头都会将包含图像的容器拍摄为 528px(每个图像的宽度)。当我到达画廊的开头或结尾时，我希望相应的箭头按钮淡出，这样用户就不会一直按下一个/上一个。

感谢任何帮助。

JavaScript

$("#btn-gallery-next").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"-=528px"});
if($("div#gallery-slide").position().left < -3168)
{
    $("#btn-gallery-next").fadeOut();
}
else {
    $("#btn-gallery-next").fadeIn();
}

});

$("#btn-gallery-prev").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"+=528px"});
if($("div#gallery-slide").position().left > 0)
{
    $("#btn-gallery-prev").fadeOut();
}
else {
    $("#btn-gallery-prev").fadeIn();
}

});

HTML

<div id="gallery-slide">
      <img class="gallery-img" src="_/img/gallery/img1.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img2.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img3.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img4.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img5.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img6.jpg" alt="" />
</div>

Answer 1

尝试 flex slider来自 woothemes，它满足您的所有需求。