Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1
Uncaught ReferenceError: swiper is not defined at
혹시 이 에러는 어떻게 해결해야 할까요??
-------------------------------------------------------------------------------
$(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, },
} });
});
답변 4개
swiper = new Swiper <==이렇게 사용할 수 있게 해주는 js화일을 불러와야 하는데 그런 것이 없으니
사용할 수 없다는 에러 입니다
swiper 관련 js화일을 불러오는 코드를 넣었다면 경로 오류로 로드하지 못하는 것이겠구요
그도저도 아니면 자바스크립트 오류가 있어서 실행되지 못하는 것입니다
댓글을 작성하려면 로그인이 필요합니다.
※ 프로젝트 구조나 Swiper 라이브러리 설치 경로에 추가적인 문제가 있을 가능성이 있습니다.
> Swiper 관련 설정 파일이나 초기화 코드를 sir에 공유하시어
sir 전문인(제작의뢰)들과 협업하여 보시면 어떨까요.
. . .
※ Swiper 라이브러리가 제대로 로드되지 않았거나
초기화 코드가 라이브러리 로드 전에 실행되었을 수도 있습니다.
이를 해결하려면 Swiper CSS와 JS 파일이 프로젝트에 포함되었는지 확인하고,
Swiper 초기화 코드가 라이브러리 로드 후 실행되도록 순서를 조정해야 합니다.
Swiper는 jQuery에 의존하지 않지만, 초기화 코드에서 jQuery를 사용하는 경우
jQuery가 로드되었는지 확인하거나 순수 JavaScript를 사용하여
Swiper 초기화를 실행할 수도 있습니다.
개발 도구에서, Swiper가 정상적으로 로드되는지, - typeof Swiper 결과 확인
디버깅 코드를 추가하여, Swiper가 제대로 로드되는지,
파일 경로는 올바른지 등의 점검이 필요합니다.
- (네트워크 탭에서 Swiper JS 파일의 로드 상태가 200이 아니라면 경로를 확인하셔야 합니다.) -
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인