-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
웹플로우 제이쿼리 슬라이드 연동 어떻게 하면 될까요?
24.05.22 11:40 작성 조회수 52
0
웹플로우를 이용해서 슬라이드를 제작중입니다.
슬라이드 템플릿을 수정해서 사용중인데 슬라이드가 두장씩 넘어가는게 아니라
한장씩 넘기고 싶어서+ 마우스 오버 비활성화를 하고싶어서 질문드립니다.
밑에 커스텀 코드를 '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>
답변을 작성해보세요.
0
일잘러 장피엠
지식공유자2024.06.06
답이 늦어서 죄송합니다. 요건 잘 모르겠습니다. 아래 ai 인프런 답변을 참고하시거나 챗GPT를 통해서 custom code를 해결해보시는게 좋을거 같습니다.
0
인프런 AI 인턴
2024.05.24
안녕하세요, 인프런 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 태그 안에 추가하신 후 다시 테스트해 보시기 바랍니다. 이렇게 해도 문제가 해결되지 않는다면, 직접 문의하기 또는 커뮤니티 포럼에서 추가적인 도움을 받아보시기를 권장드립니다.
도움이 되셨길 바랍니다.
답변 2