全屏幕內容滑塊僅滑動右邊

Question

我目前正在研究一個全屏幕滑塊，該滑塊應根據用戶點擊哪個按鈕而左右移動。當點擊下一個按鈕時，它可以很好地工作，但是當點擊前一個時，滑動條就會淡入，而不是滑動，儘管它有相同的代碼（但邊距相反）。

下面是我在做什麼（Next和Prev按鈕）：

$("#prevproject").click(function(e) { 
    e.preventDefault(); 
    //subtract 1 from i unless i is 0, then set i = 12 (last element) 

    if (i == 0) { 
     i = 12; 
    } else { 
     i = i - 1; 
    } 
    $('#project').attr('data-name', projects[i]); 
    $('#project #slide').animate({ 
      'marginRight': '25%', 
      'opacity': 0 
     }, 200, function() { 

      switchProjects(projects[i]); 

      $('#project #slide').css({ 
      'marginRight': '-25%' 
      }); 
      $('#project #slide').animate({ 
      'marginRight': '0', 
      'opacity': 1 
      }, 200); 
      //================================= 
}); 




}); 

$("#nextproject").click(function(e) { 
    e.preventDefault(); 
    //add 1 from i unless i is 12, then set i = 0 

    if (i == 12) { 
     i = 0; 
    } else { 
     i = i + 1; 
    } 

    $('#project').attr('data-name', projects[i]); 
    $('#project #slide').animate({ 
      'marginLeft': '25%', 
      'opacity': 0 
     }, 200, function() { 

      switchProjects(projects[i]); 

      $('#project #slide').css({ 
      'marginLeft': '-25%' 
      }); 
      $('#project #slide').animate({ 
      'marginLeft': '0', 
      'opacity': 1 
      }, 200); 
      //================================= 
}); 

我有一個內部的div一個div容器，並把在內部DIV幻燈片效果。內容在關閉屏幕時通過switchProjects功能加載，然後滑入新內容。

<div id="project"> 
    <div id="slide"> 
    <div class="row"> 
    <div class="column small-12 medium-4"> 
     <h4></h4> 
     <p></p> 
     <img alt="" id="map"/> </div> 
    </div> 
    </div> 
</div> 

工作相當不錯，爲未來，但不是以前。有什麼想法嗎？

Answer 1

對於任何人看。解決方案是將marginLeft設置爲我在下一個功能vs設置marginRight時所做的相反處。

$('#project #slide').animate({ 
      'marginLeft': '-25%', 
      'opacity': 0 
     }, 200, function() { 

      switchProjects(projects[i]); 

      $('#project #slide').css({ 
      'marginLeft': '25%' 
      }); 
      $('#project #slide').animate({ 
      'marginLeft': '0', 
      'opacity': 1 
      }, 200); 
      //================================= 
});