인프런 커뮤니티 질문&답변

rondeur님의 프로필 이미지
rondeur

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더)

slick이 작동되지 않는 문제

작성

·

1.4K

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는 전혀 문제 없습니다.

확실하지는 않지만 슬릭 파일의 링크에 관련된 문제인 것 같습니다. 

슬릭 파일들 링크 다시 한번 체크해보시고 확인해보세요.

이래도 안되시면 다시 글 올려주세요.

rondeur님의 프로필 이미지
rondeur

작성한 질문수

질문하기