테스트 사이트 - 개발 중인 베타 버전입니다

Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1

266 11개월 전 조회 2,650

 

Uncaught ReferenceError: swiper is not defined at :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,     },

  } });

});

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

11개월 전

swiper = new Swiper <==이렇게 사용할 수 있게 해주는 js화일을 불러와야 하는데 그런 것이 없으니

사용할 수 없다는 에러 입니다

swiper 관련 js화일을 불러오는 코드를 넣었다면 경로 오류로 로드하지 못하는 것이겠구요

그도저도 아니면 자바스크립트 오류가 있어서 실행되지 못하는 것입니다

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

glitter0gim
11개월 전

※ 프로젝트 구조나 Swiper 라이브러리 설치 경로에 추가적인 문제가 있을 가능성이 있습니다.

 

  > Swiper 관련 설정 파일이나 초기화 코드를 sir에 공유하시어

    sir 전문인(제작의뢰)들과 협업하여 보시면 어떨까요.

 

. . .

 

※ Swiper 라이브러리가 제대로 로드되지 않았거나

초기화 코드가 라이브러리 로드 전에 실행되었을 수도 있습니다.

이를 해결하려면 Swiper CSSJS 파일이 프로젝트에 포함되었는지 확인하고,

Swiper 초기화 코드가 라이브러리 로드 후 실행되도록 순서를 조정해야 합니다.

SwiperjQuery에 의존하지 않지만, 초기화 코드에서 jQuery를 사용하는 경우

jQuery가 로드되었는지 확인하거나 순수 JavaScript를 사용하여

Swiper 초기화를 실행할 수도 있습니다.

개발 도구에서, Swiper가 정상적으로 로드되는지, - typeof Swiper 결과 확인

디버깅 코드를 추가하여, Swiper가 제대로 로드되는지, 

파일 경로는 올바른지 등의 점검이 필요합니다.

  - (네트워크 탭에서 Swiper JS 파일의 로드 상태가 200이 아니라면 경로를 확인하셔야 합니다.) -

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

11개월 전

f12 누르서서 콘솔탭 에러 채크해보세요.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

swiper css 나 js 를 못불러오는거 같습니다. https://cdnjs.com/libraries/Swiper

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인