[워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)

'한번은 좌로 한번을 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다.

jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다.

jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다. 

container 안에 div를 겹치고 횟수에 따라서 한번은 왼쪽으로 한번을 오른쪽으로 향하게 할것 입니다.

jquery 동작을 생각해보시게 앞서 div에 z-index 값을 각각 다르게 줘서 첫번째 div 가장 앞으로 오게 해줍니다.

이제 어떻게 동작 시킬지 생각해 봅시다.

1. 횟수를 체크할 수 있는 변수를 둬서 왼쪽으로 가게 할지 오른쪽으로 가게 할지 판단하게 해야 합니다. 이를 count 라 한다.

2. count는 자동으로 하나씩 증가하게 필요하며, count가 증가할때 마다 count를 2로 나눠서 나머지를 체크 하는 방법으로 나머지가 0이면 오른쪽으로 움직이게 0이 아니면 왼쪽으로 움직이게 한다.

3. 슬라이드가 이동되면 방금 움직인 div를 맨뒤로 보낸 후 스타일을 원상복귀 시켜준다.

4. 2~3 의 과정을 2초마다 반복 시킨다.

아래 영상은 위 내용을 바탕으로 실제 슬라이드를 제작하는 과정을 녹화하였습니다.

(유튜브에서 더욱 큰 화면으로 보실 수 있습니다.)

샘플코드

 sample.zip

관련글

2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편)

2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)

2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (드롭다운 메뉴)

2017/08/18 - [IT] - [워크식스] 웹디자인기능사 실기 (좌로 흘러가는 슬라이드 편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (디버깅편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (퍼블리싱편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (디자인편)

copyright ⓒ 2017. 워크식스