Swiper는 Elementor: the Image Carousel, Media Carousel,의 모든 캐러셀에 전원을 공급하는 JavaScript 라이브러리입니다 사용후기 회전목마, 루프 회전목마및 모든 제3자 Elementor 캐러셀 위젯 설치하셨네요. Elementor 기능이 아닙니다. Elementor 가 번들로 제공하는 오픈 소스 슬라이더 라이브러리입니다.
이를 알면 깨진 캐러셀을 디버깅하는 방법이 달라집니다. 슬라이더가 작동을 멈추면 문제는 거의 위젯이 아닙니다. 컨테이너에 너비가 생기기 전에 Swiper가 로드하지 않았거나 초기화하지 않았거나 초기화하지 않았다는 것입니다.
빠른 수정: 플러그인 업데이트 후 슬라이더 작동이 중지되었습니다
작업 중인 회전목마가 갑자기 죽어서 여기 온 거라면, 다른 걸 읽기 전에 이걸 해봐:
- 캐싱 또는 최적화 플러그인을 엽니다.
- 자바스크립트 설정 찾기: JS,Defer JS,Delay JS 결합하기.
- 세 개 모두 끄기. 캐시 지우기. 페이지 다시로드.
캐러셀이 다시 돌아오면 JS 최적화가 이를 깨뜨렸고 수정 사항은 최적화를 중단하는 것이 아니라 제외입니다. 더 아래에는 정확한 제외가 있습니다.
Swiper가 실제로 하는 일
중첩된 세 가지 요소. 컨테이너,그 안에 래퍼,그리고 그 안으로 슬라이드합니다. Swiper 는 컨테이너의 너비를 읽고 각 슬라이드에 대해 래퍼를 얼마나 움직일지 계산하고 래퍼에 CSS 변환을 적용합니다. 슬라이드는 결코 개별적으로 움직이지 않습니다; 전체 스트립은 창 아래로 슬라이드됩니다.
이것이 바로 두 가지 범주의 버그가 지배적인 이유입니다:
스크립트가 실행되지 않았습니다. 초기화 하는 것은 없으므로 모든 슬라이드가 쌓여 있거나 상호 작용이없는 행으로 표시됩니다. Swiper 의 CSS 는 일반적으로 여전히 존재하므로 명백하게 깨지기보다는 반 스타일처럼 보입니다.
측정했을 때 용기의 너비가 없었습니다. 스와이퍼는 0 에 대해 계산되었으므로 슬라이드가 겹치거나 잘못된 크기로 앉거나 트랙이 점프합니다. 이것은 탭과 아코디언 버그입니다: 숨겨진 패널 내부의 회전목마는 숨겨진 상태에서 스스로 측정합니다.
Elementor 회전목마를 깨뜨리는 다섯 가지
1. 자바스크립트 결합 및 연기
가장 흔한 원인은 큰 차이입니다.
인라인 초기화 코드가 실행되기 전에 Swiper를 정의해야 합니다. JS를 결합하면 파일이 재정렬됩니다. 지연은 인라인 호출을 지나 실행을 푸시합니다. JS를 지연하면 init가 이미 실행되어 실패한 사용자 상호 작용까지 라이브러리가 다시 유지됩니다.
브라우저 콘솔을 엽니다. 만약 당신이 Swiper is not defined 또는 Cannot read properties of undefined, 이게 당신 문제예요.
수정: 스와이퍼 핸들을 도매로 비활성화하는 대신 최적화에서 제외합니다. 페이지 최적화 → JS 설정 아래에 있는 LiteSpeed 캐시에서. 추가:
swiper
elementor-frontend
jquery-core사람들이 LiteSpeed에서 놓치는 한 가지: 별도의 제외 필드가 있습니다 게스트 모드는 자체. 메인 JS 제외 상자만 채우면 로그인한 사용자가 작동하는 캐러셀을 보고 로그아웃한 방문자가 그렇지 않습니다. 이는 테스트하는 동안 로그인했기 때문에 테스트에서 살아남은 버그와 정확히 같습니다. 게스트 모드 필드에 동일한 제외 항목을 넣습니다.
WP 로켓: 파일 최적화 → 제외 자바 스크립트 파일, 더하기 지연 자바 스크립트 실행 아래의 동일한 문자열. 자동 최적화: 추가 → 자동 최적화에서 스크립트를 제외.
2. 숨겨지은 콘테이너 안쪽에 회전목마
탭, 아코디언 또는 오프 캔버스 패널의 캐러셀은 패널이 있는 동안 초기화됩니다 display: none니다. 너비는 0 으로 읽히고 첫 번째 프레임부터 수학이 잘못되었습니다. 탭을 열면 슬라이드가 겹치거나 움직이지 않는 트랙이 나옵니다.
수정: 대부분의 위젯은 “관찰자” 설정을 노출합니다. 켜고 Swiper 는 크기 변경을 감시하고 다시 계산합니다. 그렇지 않은 경우 캐러셀을 로드 시 표시되는 첫 번째 탭에 넣습니다.
3. 너무 적은 슬라이드로 루프 모드
루프는 슬라이드를 복제하여 랩 어라운드를 가짜로 만듭니다. 복제하기에 충분하려면 적어도 두 배의 슬라이드 당 횟수가 필요합니다. 3 회당 슬라이드 4 개는 눈에 보이는 점프,빈 틈 또는 중간에 멈추는 트랙을 생성합니다.
수정: 슬라이드를 추가하거나,루프를 끄세요. 짧은 루프를 부드럽게 만드는 설정은 없습니다.
4. 한 페이지에 두 개의 Swiper 버전
Elementor 는 버전을 번들로 제공합니다; 일부 애드온은 자체 번들로 번들로 제공됩니다. 둘 다 동일한 전역을 등록합니다. 두 번째 로드 중 어느 것이 이기든,다른 API 에 대해 위젯이 빌드된 경우 종종 존재하지 않는 메서드에 대한 오류가 발생하여 중단됩니다.
수정: 콘솔에서 실행합니다 Swiper.version. 그런 다음 애드온이 변경되지 않을 때까지 한 번에 하나씩 비활성화합니다. 잘 동작하는 플러그인은 자체 복사본을 배송하는 대신 Elementor 의 복사본을 재사용합니다. 캐러셀 플러그인 비교 어느 것이 그렇게 하는지 기록합니다.
5. 슬라이더를 싸우는 게으른 로딩
공격적인 이미지 게으른 로딩,특히 테마 위에 별도의 게으른로드 플러그인은 슬라이드 이미지가보기로 스크롤 될 때까지 0 높이에서 슬라이드 이미지를 남길 수 있습니다. 그들은 수평 트랙에 있기 때문에 결코보기로 스크롤하지 않는 것을 제외하고는 결과: 빈 상자의 회전 목마.
수정: 게으른 로드 플러그인에서 캐러셀의 이미지 클래스를 제외하거나 상자가 공간을 예약하도록 이미지에 명시적인 너비와 높이를 설정합니다. 비디오 캐러셀 화면 밖의 모든 슬라이드에는 이미지뿐만 아니라 플레이어도 포함되어 있으므로 이 항목을 가장 세게 누르세요.
Swiper가 로드되었는지 확인하는 방법
30초가 지나면 문제의 어느 절반이 있는지 알려줍니다.
- 깨진 회전목마로 페이지를 엽니다.
- 브라우저 콘솔을 엽니다(F12 또는 마우스 오른쪽 버튼을 클릭하거나 → 검사 → 콘솔).
- 유형
typeof Swiper그리고 enter 를 누릅니다.
"function" 이는 라이브러리가 로드되었음을 의미하므로 문제는 초기화입니다: 숨겨진 컨테이너 또는 루프 설정을 살펴보세요. "undefined" 도착하지 않았음을 의미하며 원인은 JS 최적화 또는 체인 앞부분에서 실패한 스크립트입니다. 마지막 오류가 아닌 첫 번째 빨간색 오류에 대해 콘솔에서 위로 스크롤합니다; 이후 오류는 일반적으로 첫 번째 오류로 인해 발생합니다.
Elementor 에서 중요한 스와이퍼 설정
대부분의 위젯은 캐러셀 설정 아래에 이러한 내용을 노출하며 때로는 다른 레이블이 있습니다:
- 보기당 슬라이드: 몇 개가 보이는가; 구분되는 것은 하나의 설정입니다 슬라이더의 회전목마. 중단점 당 놓으십시오, 항상.
- 스크롤할 슬라이드: 클릭당 몇 번의 진행. 이것을 slides-per-view 와 동일하게 설정하면 페이지 스타일의 페이징을 제공합니다; 1 로 설정하면 지속적인 느낌을줍니다.
- 속도: 표준의 경우 ms. 300에서 500으로 전환 기간이, 3D의 경우 느려집니다.
- 자동 재생 지연: 각 슬라이드에서 일시정지합니다. 0 으로 설정하면 a 가 됩니다 천막, 어떤가요 로고 슬라이더 위젯 는 보통 구성되어 있다.
- 루프: 무한 랩. 위와 같이 충분한 슬라이드가 필요합니다.
- 자동 높이: 컨테이너가 가장 높은 보이는 슬라이드와 일치합니다. 고르지 않은 텍스트에 유용하며,점피처럼 보일 수 있는 높이 애니메이션을 도입하므로 가정하기보다는 테스트해 볼 가치가 있습니다.
- 중심 슬라이드: 활동적인 활주는 플러시 좌 보다는 오히려 중앙에 앉습니다. coverflow 를 위해 필요로 한 것은 우측을 봅니다.
무료에서 나타나는 곳입니다 이미지 회전목마 위젯: 이미지 회전목마 연습 패널 스크린샷이 있습니다.
자신의 Swiper 를 로드해야 합니까?
아니, 거의 모든 경우에. Elementor의 사본은 이미 캐러셀 위젯이있을 때마다 페이지에 있으며, 두 번째 것을 추가하면 위의 버전 충돌이 발생합니다.
예외는 Elementor 캐러셀 위젯이 전혀 없는 페이지의 사용자 정의 슬라이더입니다. 그러면 Elementor 의 Swiper 가 대기열에 추가되지 않고 자신의 Swiper 가 필요합니다. 조건부로,해당 템플릿에만 대기열에 추가하므로 다른 모든 곳에서 충돌을 다시 도입하지 않습니다.
자주 묻는 질문
Elementor 에서 Swiper 란 무엇입니까?
Swiper 는 Elementor 가 모든 캐러셀 및 슬라이더 위젯에 사용하는 오픈 소스 JavaScript 슬라이더 라이브러리입니다. Elementor 는 캐러셀 위젯이 페이지에 나타날 때마다 번들로 제공하고 대기열에 추가합니다. 대부분의 타사 Elementor 캐러셀 애드온은 자체 배송이 아닌 동일한 복사본을 사용합니다.
Elementor Swiper 슬라이더가 작동하지 않는 이유는 무엇입니까?
10번 중 9번은 캐싱 플러그인의 JavaScript 최적화입니다: JS의 스크립트 재정렬을 결합, 연기 또는 지연하여 초기화 코드가 실행될 때 Swiper가 정의되지 않도록 합니다. 이 3번을 끄고 다시 로드합니다. 슬라이더가 반환되면 추가하세요 swiper, elementor-frontend 그리고 jquery-core 최적화를 비활성화하는 대신 플러그인의 JS 제외 사항에 적용됩니다.
“스와이퍼가 정의되지 않았습니다”를 어떻게 수정합니까?
초기화 코드가 실행되기 전에는 라이브러리가 로드되지 않았습니다. 캐시 플러그인의 JS 결합,연기 및 지연에서 스와이퍼를 제외합니다. LiteSpeed 에서 제외 항목을 게스트 모드 필드와 기본 필드에 추가합니다. 그렇지 않으면 로그인한 사용자에게 작동하고 방문자에게는 중단됩니다.
Elementor는 어떤 Swiper 버전을 사용합니까?
Elementor 릴리스와 함께 변경됩니다. 콘솔을 열고 실행하여 캐러셀이 있는 모든 페이지에서 확인하십시오 Swiper.version. 만약 그것이 여러분이 예상하는 것과 다른 숫자를 반환한다면,애드온은 자신의 복사본을 로드하고 Elementor 의 것을 재정의하는 것입니다.
슬라이드가 겹치거나 겹쳐지는 이유는 무엇입니까?
Swiper 는 보통 페이지 로드에서 캐러셀이 숨겨진 탭,아코디언 또는 팝업 안에 있기 때문에 컨테이너를 제로 너비로 측정했습니다. 컨테이너가 표시되면 다시 계산되도록 관찰자 설정을 활성화하거나 기본적으로 열려 있는 패널로 캐러셀을 이동합니다.
로그인할 때는 캐러셀이 작동하지만 방문자에게는 작동하지 않는 이유는 무엇입니까?
캐싱. 로그인한 사용자는 일반적으로 캐시를 우회하고 최적화되지 않은 스크립트를 얻으므로 슬라이더가 작동합니다. 방문자는 캐시,결합 및 지연된 버전을 얻고 중단됩니다. 개인 창에서 테스트하고 캐시 플러그인에서 별도의 게스트 또는 인증되지 않은 제외 목록을 확인하십시오.
아직도 고장났다면
이 순서로 작업: 콘솔 먼저 확인 (typeof Swiper), 그리고 제외를 캐시하고,그 다음 스테이징 복사본에서 애드온을 한 번에 하나씩 비활성화합니다. 그 시퀀스는 거의 모든 경우에 대해 10 분 이내에 원인을 찾습니다.
를 통해 가져온 디자인입니다 위젯 빌더 스톡 위젯과 동일한 Swiper 빌드를 사용하므로 이러한 수정 사항이 해당 위젯에도 적용됩니다. The 가격 페이지 20개 중 라이센스가 필요한 항목을 다룹니다.
오히려 알려진 - 좋은에서 시작하려면, 에있는 모든 회전 목마 위젯 요소 회전목마 위젯 페이지는 제외 안전 스크립트 핸들이 문서화되어 제공됩니다 루프 회전목마 가이드 동일한 문제의 동적 쿼리 변형을 다룹니다. 위젯을 고치는 대신 위젯을 선택하는 경우 무료 캐러셀 위젯 분석 그리고 the 20개의 슬라이더 템플릿 시작하는 두 곳입니다.
