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