#HASHTAG 메인 슬라이더 자동 전환 및 루프 설정하기

 

들어가기에 앞서...

#HASHTAG는 Swiper.js 플러그인을 사용하고 있습니다. 좀 더 심층적으로 기능을 구현하실 분들께서는 해당 홈페이지에 들어가서 API를 참고해 기능 구현을 해주시면 됩니다.

 

다만, 당연하게도 이 글을 포함하여 커스텀한 기능은 기술지원을 받을 수 없다는 점을 유의하여 사용해주시기 바랍니다.

 

---

1. 파일 찾기

메인 슬라이더를 관할하는 파일은 아래와 같습니다. 

Swiper.js
/layouts/hashtag/plugins/swiper/

#HASHTAG Main Banner
/layouts/hashtag/components/main-banner/

이 중에서 #HASHTAG Main Banner 경로에 들어가면 3개의 파일이 여러분을 반기고 있을겁니다. 우리는 'main-banner.html' 을 수정하겠습니다.

 

---

2. 수정하기

이제 거의 다 끝났습니다. 'main-banner.html' 파일을 열면 아래와 같은 스크립트가 있을겁니다.

지금 보시는 이 부분이 메인 배너의 기능을 담당하는 자바스크립트 입니다.

 

이제 이 스크립트를 아래처럼 수정해주시면 됩니다. '노란색 굵은 글씨'를 잘 확인 해주세요.

scrollbar 부분 중괄호 맨 끝에 콤마(,)를 하나 추가해주시고 그 아래에 오토플레이 기능을 넣어주시면 됩니다. 이렇게 하면 루프와 오토플레이 기능을 모두 구현할 수 있습니다.

 

만약 오토플레이 속도(자동으로 넘어가는 시간)을 조절하고 싶으시면 delay에 있는 숫자를 조절해주시면 됩니다. 1000 = 1초 이므로 7000이면 7초가 되겠죠?