CSS와 JQuery가있는 페이지간에 스 와이프를 만듭니다.

Question

HTML + CSS + JQuery에서 스마트 폰 스 와이프 탐색을 조롱하려고합니다. 내 HTML 페이지를 포함하는 iframe을 거의 설정하지 않은 상태에서 탐색 메뉴에서 해당 iframe을 스 와이프합니다. Example

코드 I :

이것은 내가 지금까지 한 일입니다 좋은,하지만 나는 슬쩍 (이하 "위로 메뉴"의 예에있는 버튼)을 iframe을 내부 버튼에서 활성화 할 슬쩍 효과를 만드는 데 사용됩니다 :

JQuery와 :

$(document).ready(function() { 
    $('#slide1_controls').on('click', 'button', function(){ 
     $("#slide1_images").css("transform","translateX("+($(this).index()-2) * -475+"px)"); 
    }); 
}); 

내가 iframe을 내부에서 버튼 그런하지만, 뭔가를 할 수 있습니까?

참고 : 각 페이지마다 내부 스 와이프 효과도 있습니다. div와 iframe을 스 와이프하여 구현됩니다. 따라서 주어진 iframe을 div로 변경하면 작동하지 않습니다.

Answer 1

작성한 내용을 함수로 변환 한 다음 iframe 내부에서 해당 함수를 호출 할 수 있습니다.

//// on parent page 
function slidePage(){ 
    // slide logic goes here 
} 

//// inside iframe 
$('#slide-control').on('click', function(){ 
    window.parent.slidePage() 
}); 

---

은 iframe 대응 및 사이트는이 작업을 위해 동일한 도메인이 있어야합니다.