[Javascript] 이미지 슬라이드

 

 

 

https://hyunu0504.github.io/blog3/

https://hyunu0504.github.io/blog3/

 

 

 

 

 

 

 

html

 

 

 

1, 2 , 3번 이미지를 보여주는 버튼 이전 다음 버튼이있는 이미지 슬라이드다

 

 

 

 

 

 

css

 

 

display:flex;로 가로 정렬을 한다음에 

 

이미지를 감싸고있는 부모에 overflow hidden으로 틀 이상 넘어갈시 안보이도록 처리했다

 

 

 

 

 

 

 

 

 

javascript

 

다음 이전 버튼

 

count라는 변수를 0값으로 지정하고

 

다음 버튼을 클릭할시 count라는 값이 18보다 작으면 작동하도록 

 

이전 버튼을 클릭할시 count라는 값이 0보다 크면 if문이 되도록 했다.

 

성립할시 이미지 틀의 폭을 900px로 잡았기 때문에  count에 9를 더하고 뺏다.

 

 count값에 맞게 좌표이동을 하기위해 백틱기호안에  count 변수를 넣었다.

 

 

 

 

선택 버튼 

 

첫번째 버튼 클릭시 count 값을 0 , 두번째 9, 세번째 18값을 줘서 그에 맞게 이동하도록 했다.