Slick Carousel 오류: $(...).slick 함수가 없습니다.

어떻게 해서인지 slick carousel (http://kenwheeler.github.io/slick/)을(를) 제대로 사용할 수 없습니다.

다음과 같은 오류가 발생합니다:

Uncaught TypeError: $(...).slick은(는) 함수가 아닙니다

다음과 같은 코드를 자바스크립트 파일에서 실행하고 있습니다:

function initSlider(){
    $('.references').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: true,
        prevArrow: '<div class=slick-prev><i class=fa fa-chevron-left></i></div>',
        nextArrow: '<div class=slick-next><i class=fa fa-chevron-right></i></div>'
    });
}

제일 최신의 jQuery 버전 (2.1.4)을 bower로 포함시켰습니다. 또한 head 부분에 jQuery CDN을 포함시켜도 문제가 해결되지 않았습니다.

이상한 점이 하나 있는데, 함수를 사용하지 않고 슬라이더를 호출하면 작동하지만 다음 오류가 발생합니다:

Uncaught TypeError: Cannot read property 'add' of null

이 오류는 코드가 DOM이 로드되기 전에 로드되었다는 것을 의미한다는 점을 발견했습니다 (아마도).

편집: 코드로부터 JSFiddle을 만들었습니다: https://jsfiddle.net/brz30e77/

편집2: JS 파일에 새로운 함수를 추가할 때마다 오류가 가끔씩 지속되었습니다. 최종적으로 연결된 JS 파일을 제거하고, 매우 오래된 버전을 포함하고있는 두 개의 jQuery 버전이 로드된 것을 발견했습니다.

답변 1

나중에 제가 해결책을 스스로 찾았기 때문에 답변으로 적어두었습니다:

내 JS 파일에 새로운 함수를 추가할 때마다 오류가 때때로 계속 발생했습니다. 결국 연결된 JS 파일을 다음과 같이 간략화했고, 그 결과로 jQuery의 두 가지 버전이 로드되어 있는 것을 알게 되었습니다. 한 가지는 매우 오래된 버전입니다.

답변 2

슬릭( Slick ) 캐러셀은 웹 개발자들 사이에서 인기 있는 JavaScript 라이브러리 중 하나입니다. 이 라이브러리는 이미지와 콘텐츠 슬라이더를 만들기 위해 사용됩니다. 그러나 때로는 Uncaught TypeError: $(...).slick is not a function와 같은 오류 메시지가 나타나기도 합니다. 이번 글에서는 이 오류에 대해 자세히 알아보도록 하겠습니다.
이 오류 메시지는 일반적으로 웹 페이지의 스크립트에서 발생합니다. '$(...).slick is not a function' 오류는 일반적으로 슬릭 캐러셀 라이브러리를 로드하지 않았거나, 라이브러리의 로딩이 지연되었거나, 잘못된 버전의 슬릭 캐러셀을 사용하거나, 라이브러리 파일 경로가 잘못 지정되었거나, 문제가 있는 다른 스크립트와 충돌하는 경우에 발생할 수 있습니다.
이 오류를 해결하기 위해서는 몇 가지 조치를 취할 수 있습니다. 먼저, 페이지의 스크립트 부분에 슬릭 캐러셀 라이브러리 파일을 로드하는지 확인해야 합니다. 일반적으로는 라이브러리 파일을 다운로드하고 해당 파일을 웹 페이지에 추가해야 합니다. 라이브러리를 다운로드한 후에는