웹플로우 제이쿼리 슬라이드 연동 어떻게 하면 될까요?

웹플로우(Webflow) 시작하기 - 코딩 없이 자유도 높은 프로토타입 만들기

작성

182

웹플로우를 이용해서 슬라이드를 제작중입니다.

슬라이드 템플릿을 수정해서 사용중인데 슬라이드가 두장씩 넘어가는게 아니라

한장씩 넘기고 싶어서+ 마우스 오버 비활성화를 하고싶어서 질문드립니다.

밑에 커스텀 코드를 'Before </body> tag 부분에 추가해서 퍼블리싱해봤는데 적용이 되지않네요.

잘못된 부분이나 놓친 부분이 있을까요?

물어볼 장소가 마땅치 않아서 여기에 질문드려요.

좋은 강의 늘 감사드립니다^^*

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    // 슬라이더 설정
    $('#gallery13_slider').slick({ // 슬라이드 ID가 gallery13_slider입니다
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: true,
      dots: true,
      arrows: true,
      autoplay: true,  // 자동 재생 활성화
      autoplaySpeed: 2000,  // 자동 재생 속도 (밀리초)
      pauseOnHover: false  // 마우스 오버시 멈춤 비활성화
    });
  });
</script>

프로토타이핑 no-code webflow

답변 2

일잘러 장피엠

지식공유자

답이 늦어서 죄송합니다. 요건 잘 모르겠습니다. 아래 ai 인프런 답변을 참고하시거나 챗GPT를 통해서 custom code를 해결해보시는게 좋을거 같습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

bsttjoint1님의 질문에 답변드립니다.

웹플로우에서 제이쿼리 슬라이더를 연동하고자 할 때, 기본적으로 Webflow 자체 슬라이더 기능을 사용하시거나, 외부 슬라이더 라이브러리를 사용하실 때 제시하신 코드처럼 커스텀 코드를 추가하는 방법이 있습니다. 코드 자체는 잘 작성하셨으나, 몇 가지 확인해야 할 사항이 있습니다.

jQuery 및 Slick 라이브러리 추가: 웹플로우 프로젝트의 커스텀 코드 섹션(사이트 설정에서)에 jQuery 및 Slick 슬라이더 라이브러리 링크를 추가하셨는지 확인해 주세요. Webflow는 기본적으로 jQuery를 지원하지만, Slick과 같은 외부 슬라이드 라이브러리를 사용하기 위해서는 별도로 추가해야 합니다.
Selector 확인: ‘#gallery13_slider’는 웹플로우 내에서 해당 슬라이더를 식별하는 데 사용하는 ID입니다. 해당 ID가 슬라이더의 HTML 엘리먼트에 정확히 적용되었는지 확인해주세요.
문서 로딩 시점: 위의 스크립트는 문서가 완전히 로딩된 후에 실행되도록 Webflow 배열에 함수를 푸시합니다. 이 부분은 적절히 설정된 것으로 보입니다. 그러나 외부 라이브러리가 올바르게 로드되지 않았을 경우, 해당 코드가 정상 작동하지 않을 수 있습니다.

<!-- Head 부분에 추가될 jQuery와 Slick 라이브러리 링크 예시 -->
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
</head>

위의 코드를 사이트의 Head 태그 안에 추가하신 후 다시 테스트해 보시기 바랍니다. 이렇게 해도 문제가 해결되지 않는다면, 직접 문의하기 또는 커뮤니티 포럼에서 추가적인 도움을 받아보시기를 권장드립니다.

도움이 되셨길 바랍니다.

인프런 커뮤니티 질문&답변

웹플로우 제이쿼리 슬라이드 연동 어떻게 하면 될까요?