전체 화면 내용 슬라이더 만 오른쪽으로 슬라이드

Question

현재 사용자가 클릭하는 버튼에 따라 왼쪽 또는 오른쪽으로 이동해야하는 전체 화면 슬라이더를 만들고 있습니다. 다음을 클릭 할 때 멋지게 작동하지만, 이전 버튼을 클릭하면 슬라이더 대신 슬라이더가 사라지고 다음 버튼과 마주 보게됩니다.

$("#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); 
      //================================= 
}); 

내가 내부 사업부 인 컨테이너가, 그리고 내부 사업부에 슬라이드 효과를 넣어 : 여기

내가 (다음 및 이전 버튼)하고있어 것입니다. 내용은 화면을 벗어날 때 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를 다음 함수에서 반대 방향으로 설정하고 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); 
      //================================= 
});