Infinite Carousle?
한국에서는 보통 carousel을 slider(슬라이더)라고 부르는데 대부분의 웹에 들어가면 사진또는 버튼을 클릭했을 시 사진이 넘어가는 것을 말한다.
참고로 carousel은 회전목마라는 뜻인데 그 자체로 infinite를 안붙이는게 맞는것 같기도 하고 ..
여기서 슬라이더 그러니까 캐러셀을 만드는 방법은 이미 많이 포스팅이 되어있어
vue를 통해 만든 경험을 토대로 적는 것을 포스팅 해보겠다 :)
concept
-
일단 화면에 가득차는 사진들을 담을 container를 만들고 그 사진들을 overflow시킨뒤 hidden 조건을 통해 다 사라지게 한다(flex를 이용하여 사진을 가로로 나열하는 것은 센스!)
-
여기서 주석으로 처리되어있는 width 들은 styledComponent를 사용하지 않고 scss를 사용하였던 이유로 인해 추후에 inline 스타일링을 통한 logic 구현때문이다 :) ..
일단 위와 같이 flex 와 hidden부분을 참고하면 된다
나머지는 .. refactoring이 시급하다.
앞 뒤 복사
일단 통신을 통해 받은 데이터를 state에 저장한 뒤 v-for를 돌려 여러가지 사진들을 일자로 나열하는 것을 완성한다면 그 뒤에는 버튼을 만들어 특정 넓이만큼 움직이는 함수를 만들어주면 된다.
일단 각 사진의 넓이를 구해주고 그것을 따로 state로 설정해줬다.
sliderHeight: Math.ceil(document.documentElement.clientWidth / 3.92), onePhotoWidth: document.documentElement.clientWidth,
따로 document.documentElement.clientWidth를 적용한 이유는 브라우저가 갈수록 최신화 되면서 브라우저내에서 client가 직접 zoom을 하는 것 까지 resize이벤트로 받아올 수 있기때문에 자동 변경되는 너비를 이용하기 위해 해당 요소를 사용했다.
그리고 처음에는 앞 뒤 복사가 되는 것을 created단에서 dom의 cloneNode를 이용해 복사를 하려했으나 나중에 복사된 값의 비율이 변경되지 않는 문제가 생겨 그냥 .. template에 한개씩 더 넣었다 ..🙉
사진 데이터를 저장한 state에 Index를 이용하여 제일마지막것과 제일 앞의 것을 가져 온 뒤 배치를 시켜줫다.
어차피 앞뒤로 앞에는 마지막것을 제일 뒤에는 첫번째 것을 복사해서 넣으면 되는 개념이라 그냥 .. 하드코딩을 했다.
Slider-Container
위의 사진들을 모두 담고 있는 slider컨테이너에 transform을 적용하여 사진하나의 위치만큼 이동시키는 것을 만들었다
inlineStyling이 좋지는 않지만 .. styledComponent를 사용하지 않아 피할수 없다..
picCount라는 사진 하나의 index+1에 해당하는 것을 우클릭시 +1 좌클릭시 -1을 하게 만들고 그에 따라 translate가 되는 위치를 이동시킨것이다.
transform-transition
오른쪽으로 가는 버튼의 함수인데 setTimeout을 이용하여 마지막에 도달했을 때 보통의 길이보다 한칸 더 옆으로 가게 하고 그와 동시에 transition을 none으로 줘서 효과를 없앤 뒤 실제 필요한 위치로 사진을 넘겨놓는다
그러면 시각적으로는 흘러가던방향으로 사진이 넘어가지만 사진은 첫번째에 위치한 사진을 볼 수 있게 되는 것이다
(컨테이너의 넓이는 당연히 원래사진데이터보다 2개를 더 가진 길이를 가져야한다!)
아래와 같이 개발자 도구를 통해서 보면 제일 마지막일때 넘어가는 translateX의 좌표값이 바쁘게 변경되는 것을 볼 수 있다 (setTimeout 짱짱)
그리고 mounted에서 해당 함수를 setInterval로 설정해서 2초마다 goRight함수가 자동 실행되도록 만들었다.
Drag Event
보통 mouseup, mousedown, mousemove 세단계로 나눠 진행을 한다.
개의치 않고 drag 이벤트를 사용해서 진행해보았다
dragend이벤트는 이벤트 호출이 늦게 된다.
크롬 에러라고 하는 글도 본 것 같은데 대부분이 크롬을 쓰니 어쩔수 없이 만들어야한다.
완성
-
참고
- window resize event , https://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript
