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


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



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

이번 경우는 container 안에 div를 float으로 일렬로 나열시켜서 동작을 시켜 볼겁니다.


1. 슬라이드가 시작되기 전에 3번째 div를 1번째 div 앞으로 가져와서 배너의 순서를 3,1,2 로 바꿔준다.


2. 슬라이드가 동작되면 3번째 div에 margin-left에 -(마이너스)값을 줘서 좌측으로 0.6초간 서서히 이동시킨다. (나머지 1,2는 자동으로 딸려온다.)


3. 1번째 div가 화면에서 사라지면 3번째 div를 맨뒤로 이동 시킨다. (1,2,3으로 정렬됩니다.)


4. 이동시킨 3번째 div의 스타일을 원상복귀 시켜준다.


5. 2~4 의 과정을 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. 워크식스

  1. 2018.02.11 20:10

    비밀댓글입니다

    • 홍시도둑 2018.02.12 01:06 신고

      배너가 1,2,3,4,1,2,3,4,1,2,3,4 이런 식으로 돌아가야할때 4에서 1로 변경되는 시점을 찾기 위해서에요.

+ Recent posts