Uncaught 에러 해결 방법
본문
gallery의 view.skin.php에
<div class="latest_gallery">
<?php echo latest('basic', 'gallery', 6, 100); ?>
</div>
을 집어넣었는데 개발자도구에서 아래 에러가 뜨는데 어떻게 해결해야할까요?
latest.carousel.js?v2:68
Uncaught TypeError: $this.children(...).addClass(...).owlCarousel is not a function
at HTMLDivElement.<anonymous> (latest.carousel.js?v2:68:95)
at Function.each (jquery-1.12.4.min.js?ver=2304171:2:2881)
at a.fn.init.each (jquery-1.12.4.min.js?ver=2304171:2:846)
at HTMLDocument.<anonymous> (latest.carousel.js?v2:63:36)
at i (jquery-1.12.4.min.js?ver=2304171:2:27449)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js?ver=2304171:2:28213)
at Function.ready (jquery-1.12.4.min.js?ver=2304171:2:30006)
at HTMLDocument.K (jquery-1.12.4.min.js?ver=2304171:2:30368)
갤러리 게시판의 글을 읽을 때 오른쪽에 최신글 뜨게 하려고 하는데
작동은 문제 없이 잘되는데 저런 에러가 떠서요.
어떻게 해야 저 에러문구가 안 뜰까요?
답변 1
다양한 원인이 있을텐데 아래의 내용도 참고를 해보세요.
1. Owl Carousel 라이브러리 확인
2. 현재 사용 중인 jQuery 버전(1.12.4)이 Owl Carousel과 호환되는지 확인하세요.
3. jQuery가 먼저 로드되고, 그 다음 Owl Carousel, 마지막으로 custom 스크립트가 로드되는지 확인하세요.
4. jQuery가 로드된 이후에 owlCarousel 초기화
<script>
$(document).ready(function(){
// 초기화할 요소 선택 (예: .latest_gallery 클래스)
$(".latest_gallery").owlCarousel({
items: 1, // 기본적으로 한 항목을 표시
loop: true,
margin: 10,
nav: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
</script>
5. 참고 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<div class="latest_gallery">
<?php echo latest('basic', 'gallery', 6, 100); ?>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Custom JS -->
<script>
$(document).ready(function(){
$(".latest_gallery").owlCarousel({
items: 1, // 기본적으로 한 항목을 표시
loop: true,
margin: 10,
nav: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
</script>
</body>
</html>
네 감사합니다