[워크식스] 그림으로 배우는 슬라이드 배너 원리

많은 슬라이드 배너 관련 플러그인들이 많으며, 이를 이용하는게 시간적인 측면에서도 효율적 입니다. 

그러나 때때로 제작하는 사이트에 맞지 않아 직접 슬라이드 배너를 제작해야 할때가 있습니다.

많은 분들이 슬라이드 배너 직접 제작을 어려워 하십니다. 

하지만 원리만 알고 자바스크립트 또는 제이쿼리를 다룰 능력이 된다면 이를 제작하는 방법은 쉽습니다.

이번 글에서 2017/08/18 - [IT] - [워크식스] 웹디자인기능사 실기 (좌로 흘러가는 슬라이드 편) 를 기준으로 슬라이드 배너 제작 원리를 그림을 통해 쉽게 알려드리겠습니다.

3개의 이미지가 있습니다.

3개의 이미지를 div와 같은 엘리먼트로 감싸줍니다. 우리는 이를 컨테이너라고 하겠습니다. 그리고 컨테이너를 또 다시 div와 같은 엘리먼트로 감싸줍니다. 이는 프레임이라고 하겠습니다. 이글을 보시는 분들은 스타일(css) 작성법은 누구보다도 잘 알고 있을거라 믿기에 별도로 언급하지는 않겠습니다.

프레임에는 특별하게 overflow:hidden; 스타일을 줍니다. 1,3 은 실제로는 가려져 보이지 않습니다. 우리에겐 프레임 안에 2 만 보여질것 입니다.

우리는 1 > 2 > 3 순서로 보여지게 하고 싶은데 2 가 먼저 보입니다. 그래서 슬라이드 배너가 처음 동작할때 자바스크립트를 이용하여 3을 맨 앞으로 옮겨 줍니다. 3 을 맨앞으로 옮기는 것은 맨 처음에 한번만 동작하면 됩니다.

이제 우리가 원하는대로 프레임에 1 이 먼저 보입니다. 

다음 순서로 2 가 보여 합니다. 3 에 margin-left값을 -(마이너스)를 주거나 left 값에 -(마이너스)를 주면 3 은 컨테이너를 벗어나지만 프레임에는 2가 보여질 것 입니다.

이제 벗어난 3을 컨테이너 안으로 다시 들어오게 하면서 2 뒤로 이동 시킵니다.

이번에는 1 에 마이너스 값을 줍니다. 프레임에는 3 이 보입니다.

이번엔 벗어난 1을 컨테이너 안으로 들어오게 하면서 3 뒤로 이동 시킵니다.

맨앞에 배너에 마이너스 값을 주고 컨테이너 밖으로 나가면 컨테이너 맨뒤로 들어오게 하기를 반복하면 우리가 원하는대로 프레임에는 1 > 2 > 3 으로 보이는 것 입니다.

copryright ⓒ 2017. 워크식스