全屏幕内容滑块仅滑动右边

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); 
      //================================= 
});