티스토리 북클럽 스킨 슬라이더 자동으로 넘어가게 하기

티스토리 북클럽 스킨에서 메인 프로모션 배너, 커버 슬라이더(갤러리 1, 갤러리 2)는 기본 옵션이 멈춤이고, 좌우 등 버튼을 눌러야만 다음 배너나 썸네일로 넘어간다.

스킨 HTML에서 간단한 스크립트 코드를 추가하면 이 슬라이더들이 일정 시간마다 자동으로 넘어가게 할 수 있다. 지정한 시간마다 '다음' 버튼을 누른 것처럼 구현하는 방법이다. 

마지막 배너나 썸네일까지 가면 자동으로 멈춘다.

 

아래 코드 중 원하는 것을 스킨 HTML 코드의 </body> 앞에 삽입하면 된다. 

숫자는 넘어가는 시간 간격이다. 예컨대 '2500'이면 2.5초마다, '5000'이면 5초마다, '3000'이면 3초마다 넘어간다. 

 

메인 프로모션 배너 슬라이더 자동으로 넘기는 코드

<script> setInterval(function(){ $(".main-slider .paging button").trigger("click"); },2500) </script>

커버 - 갤러리1 슬라이더 자동으로 넘기는 코드

<script> setInterval(function(){ $(".cover-thumbnail-4 .next").trigger("click"); },5000) </script>​

커버 - 갤러리2 슬라이더 자동으로 넘기는 코드

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

슬라이더 응용 : nth-child

커버 슬라이더들이 동시에 모두 움직이면 너무 정신없어진다.

이럴 땐 class명에 ':nth-child' 속성을 추가해 홀수 슬라이더, 짝수 슬라이더, n번째 슬라이더 등이 넘어가도록 옵션을 줄 수 있다. 

그 밖에 다양한 nth-child 옵션이 있으니 더 궁금하면 구글링하면 된다. 

홀수 번째 커버만 자동으로 넘기는 코드 : odd

<script> setInterval(function(){ $(".cover-thumbnail-3:nth-child(odd) .next").trigger("click"); },3000) </script>

짝수 번째 커버만 자동으로 넘기는 코드 : even

<script> setInterval(function(){ $(".cover-thumbnail-3:nth-child(even) .next").trigger("click"); },3000) </script>

3의 배수 번째 커버만 자동으로 넘기는 코드 : 3n

<script> setInterval(function(){ $(".cover-thumbnail-3:nth-child(3n) .next").trigger("click"); },3000) </script>

---

코드 다운로드

북클럽 스킨 슬라이더 코드.txt

0.00MB