그누보드 최신버전 + bxslider 적용시 에러발생
본문
일단 오류가 뜹니다. 그냥 HTML에 bxslider 적용하면 정상이구요, 그누5 최신버전에 bxslider 코드 삽입했더니 아래와 같은 오류가 나오네요,
jqmigrate 1.4.1?인가 기본으로 되어있는데도 그렇군요...
-------------------------------------------------------------------------------------------------------------------
A cookie associated with a cross-site resource at http://bxslider.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map
jquery-migrate-1.4.1.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map
jquery.min.js:2 jQuery.Deferred exception: $(...).bxSlider is not a function TypeError: $(...).bxSlider is not a function
at HTMLDocument.<anonymous> (http://webdesign.dothome.co.kr/:36:20)
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948)
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
R @ jquery.min.js:3
jquery.min.js:2 Uncaught TypeError: $(...).bxSlider is not a function
at HTMLDocument.<anonymous> ((index):36)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
(anonymous) @ (index):36
j @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
r.readyException @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
j @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
R @ jquery.min.js:3
VM4468:5 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://api.ipify.org/?format=json with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
답변 1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="http://webdesign.dothome.co.kr/theme/portfolio/images/favicon.png" rel="shortcut icon">
<link href="http://webdesign.dothome.co.kr/theme/portfolio/css/theme_v1.css" rel="stylesheet">
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
<script src="http://webdesign.dothome.co.kr/js/jquery-1.12.4.min.js"></script>
<script src="http://webdesign.dothome.co.kr/js/jquery-migrate-1.4.1.min.js"></script>
<script src="http://webdesign.dothome.co.kr/js/jquery.menu.js?ver=191202"></script>
<script src="http://webdesign.dothome.co.kr/js/common.js?ver=191202"></script>
<script src="http://webdesign.dothome.co.kr/js/wrest.js?ver=191202"></script>
<script src="http://webdesign.dothome.co.kr/js/placeholders.min.js"></script>
해당 사이트 소스를 보면 jquery선언보다 bx슬라이더 js파일 및 관련 선언이 먼저 되어있습니다
순서가 잘못된것 같네요.
jquery를 불러 온 후 해당 플러그인을 불러와야 정상적으로 동작됩니다.
해당 스크립트를 jquery 구문보다 밑으로 입력하시면 될 듯 합니다
댓글 감사합니다. 초기화해놓고 다시 해봐야겠네요 ㅎㅎ 한동안 손을 놨더니..
