index.html에서는 구현되던 slick slider가 왜 그누보드 설치후 먹통이 되었을까요?ㅠ
본문
쌩으로 제작한 index.html에서는 정상적으로 구현되던 slick 슬라이더가
모바일 테스트를 위해 그누보드 설치후 위에 얹어서 확인해보니 구현이 안됩니다..
같은 페이지에서 사용한 메인슬라이더 swiper 슬라이더는 정상적으로 구현되는데
그 아래 구현된 slick 슬라이더만 안되는데 혹시 이유가 있을까요??
혹시 두개 슬라이더 충돌때문에 그런가 하고 swiper 슬라이더를
모두 삭제해봤는데도 계속 slick 슬라이더는 작동을 안하네요ㅠ
고수님들 도와주시면 감사하겠습니다.
답변 3
다음 사항을 확인해 보시고 수정을 해 보시는건 어떨까 합니다.
HTTPS로 로드되는 리소스 사용:
CDN 링크를 HTTPS로 변경해보세요
예를 들어, http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css를 https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css로 수정 동일한 방식으로 스크립트의 CDN 링크도 HTTPS로 수정
jQuery 라이브러리 로드:
$ is not defined 에러는 jQuery가 로드되지 않았기 때문에 발생한 것입니다. jQuery를 로드하는 스크립트를 추가해보세요
jQuery는 여러 CDN을 통해 로드할 수 있으므로. 아래의 예는 Google CDN을 사용하는 경우입니다. 필요에 따라 사용하는 CDN을 적용하세요
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Slick Slider Script -->
<script src="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.min.js"></script>
이렇게 하면 Mixed Content 오류 및 $ is not defined 에러가 해결되어 슬라이더가 정상적으로 작동하지 않을까 합니다.
너무 감사합니다!!
http / https 이런 차이가 있을줄은 정말 몰랐네요!!
덕분에 잘 해결되서 잘 작동됩니다!!
SSL 보안서버 사용시 모든 URL은 http 가 아닌 https 로 일치 시켜줘야 합니다.
Uncaught TypeError: $(...).slick is not a function 펑션이 없다고 나오네요 일단 jquery 두개 선언해두셨는데 둘중에 하나만 써보세요.
둘중에 하나만 써봐도 계속 먹통이네요 ㅠ
f12 콘솔탭에서는 모든걸 알고 있죠.
정말 죄송한데.. 혹시 위에글이 어떤 말을 의미하는걸까요?..
디자이너라 감이 전혀 없네요 ㅠ
