Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1
본문
Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1
혹시 이 에러는 어떻게 해결해야 할까요??
-------------------------------------------------------------------------------
$(document).ready(function(){
//아래 소스는 오토슬라이드, 페이드효과
var swiper = new Swiper('.swiper-container-main', {
speed: 1000,
/*페이드의 duration*/
spaceBetween: 0,
effect: 'fade', //메인 화면의 전환 효과설정입니다. fade와 scroll 둘중에 선택해주세요
loop: true,
autoplay: {
delay: 500, //메인 화면의 fadein되는 초입니다. 1000 = 1초입니다.
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination-main',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-main',
prevEl: '.swiper-button-prev-main',
},
});
//아래 소스는 오토슬라이드, 페이드효과
var swiper2 = new Swiper('.swiper-container-topbanner', {
speed: 1000,
/*페이드의 duration*/
spaceBetween: 0,
effect: 'slide', //메인 화면의 전환 효과설정입니다. fade와 scroll 둘중에 선택해주세요
centeredSlides: true,
loop: true,
autoplay: {
delay: 500, //메인 화면의 fadein되는 초입니다. 1000 = 1초입니다.
disableOnInteraction: false,
}
});
var galleryTop = new Swiper('.gallery-top', {
slidesPerView: 2,
spaceBetween: 10,
// init: false,
navigation: {
nextEl: '.swiper-button-next-detail',
prevEl: '.swiper-button-prev-detail',
},
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 2,
spaceBetween: 10,
},
}
});
var swiper3 = new Swiper('.swiper-container2', {
slidesPerView: 5,
spaceBetween: 0,
// init: false,
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
autoplay: {
delay: 500 ,
disableOnInteraction: false,
},
speed: 1000,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
breakpoints: {
300: {
slidesPerView: 2,
spaceBetween: 10,
},
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 3,
spaceBetween: 10,
},
1100: {
slidesPerView: 5,
spaceBetween: 10,
},
}
});
var swiper4 = new Swiper('.swiper-container4', {
slidesPerView: 4,
spaceBetween: 10,
// init: false,
navigation: {
nextEl: '.swiper-button-next4',
prevEl: '.swiper-button-prev4',
},
/*autoplay: {
delay: 500,
disableOnInteraction: false,
},*/
speed: 1400,
slidesPerGroup: 1,
loop: false,
loopFillGroupWithBlank: true,
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 4,
spaceBetween: 10,
},
1100: {
slidesPerView: 4,
spaceBetween: 10,
},
}
});
var swiper5 = new Swiper('.swiper-container-recommend', {
slidesPerView: 5,
spaceBetween: 0,
// init: false,
navigation: {
nextEl: '.swiper-button-next-recommend',
prevEl: '.swiper-button-prev-recommend',
},
autoplay: {
delay: 500,
disableOnInteraction: false,
},
speed: 1000,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
breakpoints: {
300: {
slidesPerView: 2,
spaceBetween: 10,
},
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 3,
spaceBetween: 10,
},
1100: {
slidesPerView: 5,
spaceBetween: 10,
},
}
});
});
답변 3
f12 누르서서 콘솔탭 에러 채크해보세요.
※ 프로젝트 구조나 Swiper 라이브러리 설치 경로에 추가적인 문제가 있을 가능성이 있습니다.
> Swiper 관련 설정 파일이나 초기화 코드를 sir에 공유하시어
sir 전문인(제작의뢰)들과 협업하여 보시면 어떨까요.
. . .
※ Swiper 라이브러리가 제대로 로드되지 않았거나
초기화 코드가 라이브러리 로드 전에 실행되었을 수도 있습니다.
이를 해결하려면 Swiper CSS와 JS 파일이 프로젝트에 포함되었는지 확인하고,
Swiper 초기화 코드가 라이브러리 로드 후 실행되도록 순서를 조정해야 합니다.
Swiper는 jQuery에 의존하지 않지만, 초기화 코드에서 jQuery를 사용하는 경우
jQuery가 로드되었는지 확인하거나 순수 JavaScript를 사용하여
Swiper 초기화를 실행할 수도 있습니다.
개발 도구에서, Swiper가 정상적으로 로드되는지, - typeof Swiper 결과 확인
디버깅 코드를 추가하여, Swiper가 제대로 로드되는지,
파일 경로는 올바른지 등의 점검이 필요합니다.
- (네트워크 탭에서 Swiper JS 파일의 로드 상태가 200이 아니라면 경로를 확인하셔야 합니다.) -