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