slick이 작동되지 않는 문제
1578
작성한 질문수 1
안녕하세요,
슬릭 슬라이더가 작동되지않고
jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
이런 메세지가 나오는데요...
첨부해주신 단계별 코드를 보면서 하나하나 다 비교도 해보고 slick js, css 파일도 옮겨서 덮어써보고, jquery도 최신으로 바꿔봐도 슬릭 슬라이더만 작동이 되지 않는데 왜 그런 걸까요?
index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DesignWorks Architecture Agency</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Page Scroll Effects JS & CSS -->
<script src="js/velocity/modernizr.js"></script>
<script src="js/velocity/velocity.min.js"></script>
<script src="js/velocity/velocity.ui.min.js"></script>
<script src="js/velocity/main.js"></script>
<link rel="stylesheet" href="js/velocity/velocity.css">
<!-- Smooth Scrolling -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Slick.js -->
<link rel="stylesheet" href="js/slick/slick.css">
<link rel="stylesheet" href="js/slick/slick-theme.css">
<script src="js/slick/slick.min.js"></script>
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<script src="https://kit.fontawesome.com/62a31d096f.js" crossorigin="anonymous"></script>
</head>custom.js
$(function(){
// Trigger
$('.trigger').click(function(){
$(this).toggleClass('active')
$('.gnb').toggleClass('active')
})
$('section, .menu a').click(function(){
$('.gnb').removeClass('active')
$('.trigger').removeClass('active')
})
/* Smooth Scrolling */
$('.menu a, .gototop').click(function(e){
$.scrollTo(this.hash || 0, 900)
})
// Change CSS with Scroll
$(window).scroll(function(){
if($(window).scrollTop() > 50) {
$('header, .gototop').addClass('active')
}
else {
$('header, .gototop').removeClass('active')
}
})
// slick.js : history
$('.history-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 2,
})
// slick.js : project photo
$('.project-photo').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
autoplay: true,
autoplaySpeed: 2000,
cssEase: 'linear'
})
})
답변 2
0
index.html 파일 최하단에 기본으로 제공하는 제이쿼리 파일이 삭제됐는지 확인해보세요.
저도 한참 헤맸는데 이 부분을 삭제하지 않아 custom.js보다 제이쿼리 파일이 하단에 있어서 충돌이 난 것이었습니다
<!-- .cd-vertical-nav -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/main.js"></script>
0
올려주신 custom.js 코드를 그대로 복사해서 완성본 파일에 custom.js 코드를 대체해서 써보니까 전혀 문제가 생기지 않습니다.
작성하신 custom.js는 전혀 문제 없습니다.
확실하지는 않지만 슬릭 파일의 링크에 관련된 문제인 것 같습니다.
슬릭 파일들 링크 다시 한번 체크해보시고 확인해보세요.
이래도 안되시면 다시 글 올려주세요.
full reload 질문
1
181
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
149
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
199
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
317
3
css full reload 문제가 발생하여 질문드립니다!
1
316
3
파일 내 index.html에 대한 오류
1
264
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
207
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
218
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
201
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
255
3
크로스브라우징-크롬
1
280
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
256
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
217
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
275
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
257
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
508
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
233
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
309
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
261
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
423
1
포지션 속성 중복과 관련해서
1
216
1
section about에 관련.. 궁금해요
1
256
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
195
2
개발자도구
2
483
6