워드프레스 Slider Revolution 슬라이더 페이지 리디렉션 방법

Slider Revolution은 워드프레스에서 동적인 슬라이더를 표시하려는 경우에 사용되는 플러그인입니다. 이 플러그인은 아바다 등 일부 유료 테마에 번들로 포함되어 있기도 합니다. 슬라이더 레볼루션 플러그인에서 슬라이드 재생 후에 다른 페이지나 다른 URL로 이동시키기를 원하는 경우 jQuery나 자바스크립트를 사용할 수 있습니다.

워드프레스 Slider Revolution 슬라이더 페이지 리디렉션 방법

슬라이더 레볼루션(Slider Revolution) 워드프레스 플러그인에서 슬라이드 재생 후에 다른 페이지로 자동 리디렉션되도록 하고 싶은 경우 슬라이더 옵션 패널의 CSS/jQuery 탭에 다음과 같은 jQuery 코드를 추가하여 테스트할 수 있습니다.

jQuery('#rev_slider_1_1').on('revolution.nextslide.waiting', function(){ window.location.href= 'https://www.google.com'; });

그림과 같이 상단의 설정 아이콘(톱니바퀴 모양의 아이콘)을 클릭하고 CSS/jQuery 탭을 클릭한 다음, CUSTOM JS(사용자 정의 JS) 탭에 코드를 추가하시기 바랍니다.

워드프레스 Slider Revolution 슬라이더 페이지 리디렉션 방법

#rev_slider_1_1 부분은 실제 슬라이더 아이디를 확인하여 대체하도록 합니다.

참고로 요즘 핫한 챗GPT에 이 문제를 물어보니, 며칠 전에는 옵션 패널의 End Action 탭에서 리디렉션 주소를 입력할 수 있다는 엉뚱한 답을 알려주었습니다(End Action이라는 탭이 실제로는 없음). 오늘 동일한 질문을 하니 다음과 같은 자바스크립트 코드를 제시하네요.

function goToUrl() {
  window.location.href = 'http://www.example.com';
}

revapi1.bind('revolution.slide.onchange', function(e, data) {
  if (data.slideIndex === 1) { // Change 1 to the index of the slide you want to add the redirect to
    setTimeout(goToUrl, 5000); // Change 5000 to the number of milliseconds to wait before redirecting, 밀리초. 1000밀리초 = 1분
  }
});

slideIndex는 리디렉션이 추가될 슬라이드의 인덱스로 첫 번째 슬라이드가 "0"이라고 합니다.

저는 이 코드로 테스트해보니 작동하지 않았습니다. 슬라이더 구성에 따라 작동할 수도 있을 것 같습니다.

위에 제시된 코드들이 작동하지 않는 경우, 단순하게 슬라이더 로드 후 일정 시간이 지나면 자동으로 리디렉션되는 코드를 삽입하는 것도 고려해볼 수 있습니다. 예시:

// Get the slider element by its ID
const slider = document.getElementById("rev_slider_17_1");

// Wait for 10 seconds before redirecting
setTimeout(() => {
  window.location.href = "https://www.google.co.kr"; // Replace with the URL you want to redirect to, 원하는 디디렉션 URL로 대체
}, 10000);

이 코드는 대부분의 상황에서 잘 작동할 것입니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.