Div FullPage.js 내의 슬라이드 쇼

Question

나는 내 웹 사이트의 방문 영역으로 FullPage.js를 사용했습니다. 당신이 익숙하지 않은 경우 는 FullPage은 여기에 있습니다 : 내 웹 사이트에서 http://alvarotrigo.com/fullPage/

, 난 단지 ... 페이지-슬라이드를 만들 기본적으로 두 전체 창 div의 두 "페이지 슬라이드"를 가지고있다. 두 번째 페이지 슬라이드 백그라운드에서 4 개의 이미지 사이를 회전하기 위해 페이드 이미지 슬라이드 쇼를 추가하고 싶습니다. 나는 하루 종일 슬라이드 쇼를보고 있는데, 여기서 이미지를 지정하여 div를 "표지"할 수는 있지만 전체 페이지를 방해하지는 않습니다. div를 채우고 FullPage를 방해하지 않아야합니다.

어떻게해야합니까? Cycle과 NivoSlider와 같은 여러 슬라이드 쇼를 오늘 시험해 보았습니다. Cycle은 좋지만 div 전체를 "덮어 두지"는 않습니다. 그리고 전 FullPage에서 제대로 작동하는 것처럼 보일 수는 없습니다.

답변이 있어야합니다. 고맙습니다. 나는 초보자이기 때문에 친절하게 대해주십시오.

보고있는 페이지는 내가보기에 도움이된다면 여기에 있습니다. http://mudchallenger.com/fullpage/examples/video-back-test.html

Answer 1

귀하의 페이지를 살펴 보았지만 두 번째 페이지 div 블록이 어디에 있는지 찾을 수 없었습니다. 첫 페이지에 <video></video>이있는 것처럼 두 번째 페이지에 다른 <div></div> 블록을 만드십시오. '슬라이드 쇼'와 같은 ID를 지정하십시오. 원하는 슬라이드 효과에 따라이를 변경해야합니다. 하지만 나는 슬라이드 아웃과 슬라이드에 효과가 있습니다. 따라서 두 장의 사진이 나란히 있어야하며 한 장은 숨겨져 있어야합니다.

<div id="slideshow"> 
    <img src="" id="prev" /> 
    <img src="" id="next" style="display:none;" /> 
</div> 

다음 JavaScript는 이미지의 src가있는 배열을 만들어야합니다.

var images = { 
"img1": "LINK TO IMAGE HERE", 
"img2": "ETC.", 
"img3": "", 
"img4": "" 
} 

이제 타이머를 사용하여 이미지 소스를 변경하면됩니다. JavaScript에서는 이미지의 .src 만 변경됩니다. 이런 식으로 보일지도 모릅니다.

// Timer code here 
function changeImg(i) { 
    document.getElementById('prev').src = images[i]; 
} 

전환에 CSS3을 사용하십시오. 여기에이 링크에

봐 : 당신은 예와 함께 작동하도록 코드를 적용해야합니다 CSS 3 slide-in from left transition

. 하지만 그게 당신이하려는거야? 죄송합니다. 코드의 나머지 부분을 작성하지 않았으며, 다소 피곤합니다.