스크립트 충돌이요~
관련링크
본문
<?php
add_javascript('<script src="'.G5_JS_URL.'/jquery-1.12.4.min.js"></script>', 0);
add_javascript('<script src="'.G5_JS_URL.'/jquery-migrate-1.4.1.min.js"></script>', 0);
add_javascript('<script src="'.G5_JS_URL.'/jquery.menu.js?ver='.G5_JS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_JS_URL.'/common.js?ver='.G5_JS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_JS_URL.'/wrest.js?ver='.G5_JS_VER.'"></script>', 0);
add_javascript('<script src="'.G5_JS_URL.'/placeholders.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/slick.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/nav.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/main.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/slick.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery-3.5.1.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/box.js"></script>', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/font-awesome/css/font-awesome.min.css">', 0);
?>
<!--FULLPAGE-->
<script type="text/javascript" src="/theme/full2/js/jquery-1.12.2.min.js"></script><!--충돌해서 slick.js 고정 스크립트 안먹힘-->
<script type="text/javascript" src="/theme/full2/js/fullpage.js"></script>
<script type="text/javascript" src="/theme/full2/js/custom.js"></script>
jquery-1.12.2.min.js 지금 이거 때문에 slick.js 이 스크립트가 안먹히는데
다른 제이쿼리 파일로 대체해야할까요?
자세히 좀 알려주세요 디자이너입니다 ㅠㅠ
답변 4
풀페이지js하고 슬릭js가 각각 지원하는 제이쿼리 버전이 달라서 그럴거에요 2개다 맞출수있는 제이쿼리 버전으로 cdn 검색해서 넣어보세요
어떻게 검색하면 되나요? 제가 디자이너인지라 ㅠㅠ 부탁드려요 ㅠㅠ
제이쿼리 몇버전에서 fullpagejs가 작동하시나요?
제이쿼리 버전을 맞춘느거보다 slick이나 fullpage 라이브러리를 다운그레이드 시켜서 맞추는게 나을거같네요
jquery-1.12.2.min.js 이게 풀페이지에서 작동되요~
구글링 해보니 제이쿼리 1.12.2버전에서 작동하는 스와이퍼 버전이 3.4.0버전이라 하네요
css는 https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css
javascript를 https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js
연결해보세요
다만 스와이퍼의 버전이 낮아져서 문법이나 함수명이 달라진 부분이 있을수 있어 해당버전의 기술문서나 해당버전을 사용한 예시코드를 참조해주세요
slick.min.js/slick.js 둘 중 하나만 사용하면 안되나요?
add_javascript('<script src="'.G5_JS_URL.'/jquery-1.12.4.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery-3.5.1.min.js"></script>', 0);
<script type="text/javascript" src="/theme/full2/js/jquery-1.12.2.min.js"></script>
jquery가 세개 있네요 제일 위에꺼 빼고 나머지는 주석처리해서 테스트 해보십시요.
slick.min.js
slick.js 도 두개 있네요
위에꺼 빼고 주석처리하면 fullpage.js가 안먹혀요~
다 빼는게 아니라 제이쿼리 파일은 하나만 들어가야 합니다. 셋중에 하나만 들어가면 됩니다.
슬릭파일도 둘중 하나는 삭제하시면 됩니다.
어떤 오류가 뜨는지 알고 싶습니다.
jquery-1.12.4.min.js 이것만 두고 주석처리하면 fullpage.js 이게 안 먹히는거에요~
개발자도구 콘솔에 어떤 오류가 찍히는지 확인해 주실 수 있나요?
custom.js?ver=210618:14 Uncaught ReferenceError: swiper is not defined
at HTMLDocument.<anonymous> (custom.js?ver=210618:14:2)
at i (jquery-1.12.4.min.js?ver=210618:2:27449)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js?ver=210618:2:28213)
at Function.ready (jquery-1.12.4.min.js?ver=210618:2:30006)
at HTMLDocument.K (jquery-1.12.4.min.js?ver=210618:2:30368)
이런 에러가 떠요~
지금 jquery-1.12.4.min.js 이거 하나 두고 나머지는 삭제한 상태구요~
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
이거 추가하고 해보십시요
혹시 소스 보시기해서 확인해보시면 jquery-1.12.2.min.js 값이 2개가 나온다면..
1개를 지우시고 테스트 해보시기 바랍니다.
저도 과거 jquey가 동작이 안되서..jquery.js파일이 2개 들어간걸 확인해서..1개를 지우니 정상적으로 동작된것을 확인되었습니다.