티스토리 스킨 JQuery 슬라이드 자동 넘김

제이쿼리 활용

간단한 스크립트 코드를 작성하여 메인 슬라이드 커버 요소(Slider)를 자동 넘김으로 구현할 수 있습니다.

<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>

바로 위와 같이 커버 슬라이드 부분을 자동으로 넘김다는 명령어입니다. 4000은 4초를 의미합니다. 시간 간격을 조절하고자 할 때는 1/1000 기준으로 시간을 변경해주세요. .cover-slider가 기존 슬라이드 리스트의 클래스 값이고, .next는 다음 버튼을 의미합니다. .trigger는 이를 클릭("click")하여 해당 동작을 작동시키는 것을 의미합니다. 최근에 제작한 사이트의 예시를 아래의 이미지에서 확인해보세요.

저는 4초로 설정하여 자연스럽게 넘어가는 것을 확인할 수 있었습니다. 사이트를 훨씬 세련되고 다채롭게 만들어주는 메인 슬라이드 기능은 사이트를 만드는 사람들에게는 가장 핵심적인 기능입니다.

고화질의 이미지 몇 장 만으로도 넓은 공간을 채우면서 다른 요소들과 훨씬 비율적으로도 조합이 잘 맞는데요. 거기에다가 여러 가지 애니메이션 기능을 추가할 수 있다면 훨씬 다이내믹한 사이트를 구성할 수 있겠습니다.