제이쿼리 슬라이드 구조 이해

제이쿼리 슬라이드 구조(좌우 상하) 이해

슬라이드는 실제 나열되어있는 다수의 슬라이드(빨강)과 다수의 슬라이드가 보이게 되는 영역(파랑)으로 구조가 나뉘어져 있습니다. 파랑 영역은 슬라이드 1개의 크기와 동일하게 설정하여 보이는 영역을 처리하고 

빨강 슬라이드는 하나씩 애니메이션 메서드 값으로 이동되며 파랑 영역에서 보이는 영역을 처리하게 됩니다.

 

* 제자리 슬라이드의 경우에는 해당되지 않습니다.

 

 

아래 그림을 참고로 보면

실제 슬라이드가 보이는 영역(슬라이드의 부모(파랑)) 영역은 고정되어있고 그 안에서

슬라이드의 개수(빨강 slide1,2,3)이 개발자가 설정한 방향으로 이동되면서 보이는 영역을 처리하는 것을 볼 수 있습니다.

* 상하 방향도 position 위치값만 다를 뿐 나머지 구조는 동일합니다.

 

 

기본 슬라이드 HTML 형태는 다음과 같습니다.

<div id="슬라이드 전체 부모 영역">
	<div id="슬라이드 근접부모영역(파랑)">
    	<div class="슬라이드1(빨강)">1</div>
        <div class="슬라이드2(빨강)">2</div>
        <div class="슬라이드3(빨강)">3</div>
    </div>
</div>

* 근접 부모를 묶는 전체 부모 영역은 인디케이터 및 이전/다음 버튼, 배경색 등을 담당하는 영역이 됩니다.