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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1

QA

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,
    },

  }
});


});

이 질문에 댓글 쓰기 :

답변 4

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

 

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

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

 

. . .

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT