[jQuery] 무한슬라이드 만들기

 

 

 

 

 

슬라이드는 흔히 사용하는 플러그인이 가장 간단하지만,

제이쿼리 실력을 늘려보려면 실제로 만들어 보는 것이 좋다.

방식은 여러 가지가 있으니 곰곰히 생각해 보고 자신이 더 좋다고 생각하는 방식으로 제작하면 된다.

 

여기서는 prependTo 와 appendTo를 이용하고 css의 opacity 속성을 이용하여 fadeIn fadeOut 효과를 냈다.

슬라이드들을 position absolute로 한 곳에 몰아두고 opacity를 0으로 하여 보이지 않게 처리한다.

 

처음 로드시 첫 슬라이드의 opacity를 1로 animate한다.

그리고 이전, 이후 버튼을 클릭하면 해당 슬라이드의 opacity를 0으로 animate한 후

나타나게 할 슬라이드의 opacity를 1로 animate한다.

 

setInterval을 설정해 5초마다 자동으로 넘어간다.

 

슬라이드는 생각보다 간단하고

이런식으로 만드는 편이 내가 원하는 부가 기능을 넣기도 편리하다.