响应式Javascript Image Slider，管理状态更改

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{
//...
}

只是为了遵循这里用于rightClick的逻辑，因此，当它是左侧的第一张幻灯片时，您需要将幻灯片向左移动（通过设置margin-left），以便其右侧与窗口的右侧相匹配。

查看完整代码：

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("+=");
    }
});