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화일을 불러오는 코드를 넣었다면 경로 오류로 로드하지 못하는 것이겠구요

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

 

 

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

회원로그인

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