响应Javascript图像滑块，管理状态变化

Question

我有一个响应式网站，有一个图像滑块，用户可以查看。

这里是链接到滑块： http://firehousecoffeeco.com

我能得到幻灯片返回到第一张幻灯片当他们点击最后一张幻灯片“右”键，没有的右边缘最后一张幻灯片放到窗口太远了。这是通过检查视窗宽度与容器div的宽度来完成的（请参阅下面的左键单击处理程序）。

我的问题是：如何使它与上一张幻灯片发生的相同事件发生在第一张幻灯片中。 （无论如何，我从来不希望容器的左边缘高于0px）。我试图做同样的第一张幻灯片与过去的，但它没有”工作，请参阅以下内容：

这里是滑块的标记：

<section id="photoGallery"> 
     <div id="slides"> 
      <div class="slide"></div> 
      <div class="slide"></div> 
      <div class="slide"></div> 
      <div class="slide"></div> 
      <div class="slide"></div> 
      <div class="slide"></div> 
     </div> 
     <!--left and right buttons--> 
     <div id="left" data-dir="left"></div> 
     <div id="right" data-dir="right"></div> 
    </section> 

的div容器是“幻灯片“而这正在被移动。

这里是我的脚本的点击处理程序和转换函数：

//click handlers 
leftButton.on('click', function(){ 
    var viewport = $(window).width(); 
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left; 
    var slidesContainer = $('#slides').width(); 

    if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!) 
     slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200); 
     console.log("working"); 
    } else { 
     transition("+="); 
    } 
}); 

rightButton.on('click', function(){ 
    var viewport = $(window).width(); 
    var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right; 
    var slidesContainer = $('#slides').width(); 

    if (slidesContainerEdge < viewport + 320) { //if last slide 
     slides.animate({marginLeft:"0px"}, 200); 
    } else { 
     transition("-="); 
    } 
}); 

function transition(direction) { 
     slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200); 
    } 

希望你们能帮助我走出困境的。提前致谢！

Answer 1

if(0 >=slidesContainerLeftEdge > -320){ // if first slide 
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200); 
}else{ 
//... 
} 

只是跟随在这里你用于右击逻辑，所以当它的左边第一张幻灯片，你会移动滑块向左（通过设置保证金左），所以它的权利比赛窗户的右侧。

见全码：

leftButton.on('click', function(){ 
    var viewport = $(window).width(); 
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left; 
    var slidesContainer = $('#slides').width(); 

    if (0 >=slidesContainerLeftEdge > -320) { 
     slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200); 
    } else { 
     transition("+="); 
    } 
});