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 에러가 해결되어 슬라이더가 정상적으로 작동하지 않을까 합니다.
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
Uncaught TypeError: $(...).slick is not a function 펑션이 없다고 나오네요 일단 jquery 두개 선언해두셨는데 둘중에 하나만 써보세요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
http / https 이런 차이가 있을줄은 정말 몰랐네요!!