제이쿼리 활용
간단한 스크립트 코드를 작성하여 메인 슬라이드 커버 요소(Slider)를 자동 넘김으로 구현할 수 있습니다.
<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>
바로 위와 같이 커버 슬라이드 부분을 자동으로 넘김다는 명령어입니다. 4000은 4초를 의미합니다. 시간 간격을 조절하고자 할 때는 1/1000 기준으로 시간을 변경해주세요. .cover-slider가 기존 슬라이드 리스트의 클래스 값이고, .next는 다음 버튼을 의미합니다. .trigger는 이를 클릭("click")하여 해당 동작을 작동시키는 것을 의미합니다. 최근에 제작한 사이트의 예시를 아래의 이미지에서 확인해보세요.
저는 4초로 설정하여 자연스럽게 넘어가는 것을 확인할 수 있었습니다. 사이트를 훨씬 세련되고 다채롭게 만들어주는 메인 슬라이드 기능은 사이트를 만드는 사람들에게는 가장 핵심적인 기능입니다.
고화질의 이미지 몇 장 만으로도 넓은 공간을 채우면서 다른 요소들과 훨씬 비율적으로도 조합이 잘 맞는데요. 거기에다가 여러 가지 애니메이션 기능을 추가할 수 있다면 훨씬 다이내믹한 사이트를 구성할 수 있겠습니다.
'Tistory > Tistory Skin' 카테고리의 다른 글
티스토리 단축키 추가방법 (0) | 2020.10.05 |
---|---|
티스토리 공지사항 치환자 사용방법과 예시 (0) | 2020.09.23 |
티스토리 카테고리의 다른글 카테고리 이름추가(인덱스 치환자) (0) | 2020.08.06 |
티스토리 스킨 검색창(Search) 만드는 방법 (0) | 2020.06.28 |
티스토리 스킨 가이드 (2) | 2020.06.03 |
티스토리 HTML 스킨편집 단축키 (0) | 2020.05.31 |
티스토리 Fontawesome 최적화 적용 및 사용방법 (0) | 2020.05.19 |
티스토리 더보기 버튼 디자인(CSS) (0) | 2019.11.01 |