Swiper 슬라이드가 안됩니다 ㅠㅠ
본문
안녕하세요
혼자 독학으로 포트폴리오를 제작하고 있는 코린이 입니다...
똑같은 소스 그대로
메인 슬라이드 부분만 따로 html 저장하면 잘 작동이 되거든요
근데 똑같은 소스를
헤더부분 밑에 추가하면 작동이 안돼요 ㅠㅠ
따로 떼어서 생성된 html 파일에서는 실행이 잘 되는걸 보면
Swiper 코딩이 틀린건 없는것 같은데...
뭐가 문제일까요? ㅠㅠ
CSS, JS 는 따로 파일로 만들었거든요..
CSS에서 문제가 있는걸까요? ㅠㅠ
CSS는 우선 너무 길어서 다 캡쳐를 하진 않고 슬라이드 부분만...
----------- CSS 중 Swiper 슬라이드 적용 부분
--------- JS 파일 전체 캡처
이걸로 어제 계속 인터넷, 블로그 다 찾아보다가
4시간 동안 해결 못하고 끝냈거든요 ㅠ 좌절...
고수님들 도와주세요 ㅠㅠㅠㅠ
답변 1
헤더에 있는 스와이퍼에 mySwiper 클래스가 안보이네요.
섹션아래 swiper-container에 header-swiper 클래스 추가하세요.
<section>
<div class="swiper-container header-swiper">
...
그리고 메인페이지에서는 메인의 스와이퍼랑 헤더의 스와이퍼가 겹치기때문에 클래스명을 따로 주시고
따로 swiper 클래스를 만들어주셔야합니다. 그리고 페이지네이션과 네비게이션도 '.header-swiper .swiper-pagination' 이런식으로 정확히 정의해주셔야 안겹칩니다. 이게 겹치면 메인페이지에서 메인슬라이더를 페이지 넘기면 헤더의 슬라이더도 같이 넘어가거든요. 코드를 올려주셨으면 복붙으로 구현해드릴텐데 스샷이라 일일이 타이핑 해드릴수가 없네요.
var swiper_header = new Swiper('.header-swiper',{
...
답변을 작성하시기 전에 로그인 해주세요.
