티스토리 스킨 슬라이더 자동넘김 스크립트 - 마우스 올렸을 때 슬라이드 멈추기 코드

최신 티스토리 스킨 (왓에버 Whatever, 포스터 Poster, 포트폴리오 Portfolio, 매거진 Magazine)에는 여러 커버 기능이 있습니다. 그 중에서 대표적인 커버로 슬라이더가 있는데 여러 포스트를 클릭하면서 순차적으로 큰 화면에 보여줄 수 있습니다. 구조가 슬라이더이기 때문에 분명히 자동넘김 기능이 있을 것 같은데.. 스킨 메뉴에는 딱히 옵션이 제공되어 있지 않습니다.

홈화면 슬라이더 커버 모습

조금 구글링해 본 결과(티스토리 포럼 h하우님 댓글)와 이를 응용해서 각 스킨에서의 자동넘김 스크립트를 공개해 봅니다. 스킨파일은 왓에버와 포스터가 유사하고, 포트폴리오와 매거진이 유사하네요. 아래 스크립트는 각 스킨에서 정상 작동하는 것을 확인했습니다.

---

Whatever 스킨:

<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>

---

Poster 스킨:

<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>

---

Portfolio 스킨:

<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".type_featured .btn_next").trigger("click");
},5000)
</script>

---

Magazine 스킨:

<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".slide_area .btn_next").trigger("click");
},5000)
</script>

---

사용법은 본인의 스킨에 해당하는 스크립트를 복사한 후, 스킨편집/html편집에 들어가서 화면 맨 아래 </body> 앞에 붙여넣기 하면 됩니다. 숫자 4000, 5000은 자동넘기기 주기인데 4초, 5초를 의미하니 원하는 간격대로 바꾸면 됩니다.

(추가 2020/7/28) 홈 화면에 슬라이드를 추가하고 보니 약간 정신없이 지나가는 면이 있습니다. 보고 싶은 슬라이드에서 슬라이드 쇼가 일시적으로 멈추게 하고 싶은데.. 다른 웹사이트에서 마우스를 올리면 슬라이드가 멈추는 기능을 본 것도 같습니다.

티스토리 블로그에 추가하고 싶어서 관련 내용으로 구글링 해 보니.. 티스토리 스킨에 직접 적용한 내용은 보이지 않네요. 정보의 바다라고 구글링 해보면 관련 정보를 찾기도 싶지 않은데.. 여러 잡다한 제안 중에서 "Stop slideshow on mouseover" (stackoverrun.com/ko/q/5862346)라는 글을 참고해서 왓에버 스킨에 적용되는 다음의 코드를 만들었습니다. 

<!- 슬라이드 자동넘김 >
<script>
var theInterval;

function slideSwitch(){
$(".cover-slider .next").trigger("click");
}

function startSlide() {
       theInterval = setInterval(slideSwitch, 4000);
}

function stopSlide() {
       clearInterval(theInterval);
}

$(function () {
       startSlide();
       $('.cover-slider ul li').hover(function () {
           stopSlide();
       }, function () {
           startSlide();
       })
});
</script>

다른 스킨에서는 위에 공개된 내용을 바탕으로 적절히 응용하시면 될 것 같습니다. 

포토폴리오 스킨에는 다음 코드를 써야 하네요. 변수 찾기 힘드네요 ㅋㅋ

<!- 슬라이드 자동넘김 > 
<script> 
	var theInterval; 
	function slideSwitch(){ $(".type_featured .btn_next").trigger("click"); } 
	function startSlide() { theInterval = setInterval(slideSwitch, 4000); } 
	function stopSlide() { clearInterval(theInterval); } 
	$(function () { startSlide(); 
		$('.type_featured .slide_item').hover(function () { stopSlide(); }, function () { startSlide(); }) 
		}); 
</script>