블로그에 생동감을! 블로그스팟 '자동 롤링 카드 슬라이드' 구현 가이드

 

눈길을 사로잡는 마법! '자동 롤링 슬라이드' 구현법

사용자가 가만히 있어도 카드가 스스로 넘어가는 자동 슬라이드는 블로그를 훨씬 역동적으로 보이게 합니다. 이전의 가로 스크롤 방식에 자동 타이머 기능을 추가하여 끊김 없는 콘텐츠 노출 환경을 만들어보겠습니다.

1단계: 자동 롤링 전용 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

기본 슬라이드 CSS에 아래 내용을 추가하세요. 부드러운 스크롤을 위해 scroll-behavior를 반드시 포함해야 합니다.

/* 자동 슬라이드 컨테이너 */ .auto-slide-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* 🚩 자동 이동 시 부드럽게 흐르도록 설정 */ gap: 15px; padding: 20px 5px; } .auto-slide-wrapper::-webkit-scrollbar { display: none; } /* 스크롤바 숨기기 */ .slide-card { flex: 0 0 240px; /* 카드 너비 */ scroll-snap-align: start; /* (기본 디자인은 이전 가이드와 동일) */ }

2단계: 자동 작동을 위한 자바스크립트(JS)

이 부분이 슬라이드를 움직이게 하는 핵심 엔진입니다. [테마] → [HTML 편집]에서 </body> 태그 바로 위에 넣으세요.

<script> const slider = document.querySelector('.auto-slide-wrapper'); let isHovered = false; // 마우스를 올리면 롤링 멈춤, 떼면 다시 시작 slider.addEventListener('mouseenter', () => isHovered = true); slider.addEventListener('mouseleave', () => isHovered = false); setInterval(() => { if (!isHovered) { const cardWidth = slider.querySelector('.slide-card').offsetWidth + 15; // 끝까지 가면 처음으로, 아니면 옆으로 한 칸 이동 if (slider.scrollLeft + slider.offsetWidth >= slider.scrollWidth) { slider.scrollTo({ left: 0, behavior: 'smooth' }); } else { slider.scrollBy({ left: cardWidth, behavior: 'smooth' }); } } }, 3000); // 🚩 3000은 3초를 의미합니다 (원하는 대로 조절 가능) </script>

💡 더 똑똑한 슬라이드 활용법
1. 시간 조절: 3000을 5000으로 바꾸면 5초마다 느긋하게 글이 넘어갑니다.
2. 호버(Hover) 기능: 독자가 특정 글에 관심을 보여 마우스를 올리면 슬라이드가 멈추도록 설계되어 있어 가독성을 해치지 않습니다.
3. 반응형: 모바일에서도 똑같이 부드럽게 작동하므로 별도의 추가 작업이 필요 없습니다.

3단계: 본문에 HTML 삽입 (이전과 동일)

<div class="auto-slide-wrapper"> <a href="주소1" class="slide-card"> ...카드내용... </a> <a href="주소2" class="slide-card"> ...카드내용... </a> <a href="주소3" class="slide-card"> ...카드내용... </a> </div>

⚠️ 주의사항
자동 롤링은 화려하지만 너무 빠르면 독자가 글을 읽는 데 방해가 될 수 있습니다. 3~5초 사이의 넉넉한 간격을 추천합니다. 또한, 한 페이지에 자동 슬라이드가 너무 많으면 로딩 속도에 영향을 줄 수 있으니 1개 정도가 가장 적당합니다.

부드럽게 돌아가는 슬라이드로 여러분의 블로그를 살아있는 공간으로 만들어보세요!