이미지 슬라이드되는 팝업이 없나요?
의뢰하신 고객분의 요청으로 이미지가 슬라이드 되는 팝업을 요청하셨어요. 워낙에 워드프레스를 처음 접해보신 고객님이다보니 워드프레스를 접하지 않으셨더라도 관리가 어렵지 않아야 유용하게 사용하지 않을까란 생각으로 플러그인들을 추려서 고민해보았어요.
선정 기준
- 1. UI와 사용법이 쉬워야 한다.
- 2. 우리나라 웹환경에 맞는 적절한 기능을 제공해야 한다.
- 3. 개발자 친화적이면서 사용자 친화적이어야 한다.
- 4. 추후 운영에 문제 없게끔 업데이트가 꾸준히 되어야 한다.
- 5. 설치 이후, 라이센스 문제로 기능의 제한이 생기지 않아야 한다.
이와 같은 조건으로 접근하다보니 코스모스팜의 심플 팝업을 선정하게 되었습니다. 다른 나라에서 개발된 플러그인들은 생각보다 우리나라의 실정에 맞는 팝업 플러그인이 없고, 어느 정도 지원하더라도 유료 구독과 같은 번거로운 결제 방식으로 제한적이다보니 여러모로 고객의 입장에서도 최적의 플러그인이라고 생각했습니다. 그리고, 결정적인 요인은 용도에 따라 직접 코드 수정도 어느 정도 가능애야 한다는 점, 즉, 개발자 친화적인 플러그인을 원했기 때문에 선택하였던 것도 사실입니다.
이 밖에도 코스모스팜 프로그램들의 좋은 점은 유저의 의견을 반영하여 꾸준히 업데이트 된다는 점이 자주 이용하게 되는 이유인 듯 합니다.
하지만, 코스모스팜 심플 팝업에는 아쉬운 점이 있습니다. 슬라이드는 지원하지만, 이 슬라이드가 자동으로 슬라이드 시킬지 여부에 대한 컨트롤이 없다는 것입니다. 고객의 피드백을 듣고 꾸준히 추가 기능들을 업데이트 해주는 코스모스팜 특성상 이 문제도 어느 시간이 지나면 해결될 것으로 보입니다. 빠르게 이 문제를 해결하길 원하시는 분들을 위해 오늘은 코스모스팜 심플 팝업의 이미지 슬라이드를 자동으로 전환 시키는 방법에 대해 알아보겠습니다.
스크립트 코드
<script>
const swiper = new Swiper(‘.swiper', {
loop: true, // 무한 반복
autoplay: {
delay: 3000, // 3초마다 자동 슬라이드
disableOnInteraction: false, // 사용자 조작 후에도 자동 슬라이드 유지
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>위 코드를 적용하는 방법은 여러가지가 있겠지만, 누구나(코드를 전혀 모르시는 분) 따라하기 쉽게 설명 드리겠습니다. 누구나 따라하기 쉽게 설명드리는 것이다보니 천천히 따라해보세요. 순서는 다음과 같습니다.
- 1. 워드프레스 관리자 페이지>플러그인>플러그인 추가에서 WP Code를 검색.
- 2. 검색된 플러그인 목록에서 해당 플러그인을 설치 및 활성화
- 3. 워드프레스 관리자 페이지>코드스니펫>헤더 및 푸터 선택
- 4. 위 스크립트 코드 복사 후 푸터(</body>)에 붙여 넣기한 다음 변경사항 저장
- 6. 팝업이 슬라이드 되는지 확인
참고) 여기서 테마에서 JS CODE를 넣는 곳이 따로 있다면, </body>쪽에 넣어주세요. 잘 모르시겠다면, 위 방법을 동일하게 따라해주시면 누구나 다 할 수 있습니다.
대부분 똑같이 따라 하셨다면, 문제없이 해당 코드가 실행되었으리라 생각됩니다. 오늘은 코스모스팜 심플팝업의 이미지 슬라이드를 자동으로 전환 하는 방법에 대해 알아봤습니다. 다음엔 더 좋은 글로 찾아뵙겠습니다. 감사합니다.
