Swiper Js là gì?
Swiper Js là thư viện javascript giúp bạn tạo ra các slider đẹp mắt và linh hoạt. Chính vì vậy, Elementor đã tích hợp thư viện Swiper Js vào nền tảng của mình để phát triển các widget liên quan đến việc trình chiếu hình ảnh và nội dung như: slider, carousel…
Tích hợp thư viện Swiper Js vào widget mở rộng giúp bạn tiết kiệm thời gian và tận dụng thư viện hệ thống trong việc mở rộng các tính năng slider.
Cách tích hợp Swiper Js vào Elementor
Từ phiên bản 3.20 trở về trước, có nhiều cách để bạn tích hợp thư viện này vào trong widget của mình. Tuy nhiên đến phiên bản 3.21 thì Elementor đã bỏ hoàn toàn các cách khác và chỉ giữ lại một cách duy nhất để tích hợp thư viện này vào widget mở rộng đó là sử dụng thuộc tính swiper trong file javascript:
const asyncSwiper = elementorFrontend.utils.swiper;
Sau đó để tạo một đối tượng swiper thì sử dụng kỹ thuật Promise:
new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) => {
console.log( 'New Swiper instance is ready: ', newSwiperInstance );
mySwiper = newSwiperInstance;
} );
Theo như cách cũ, để sử dụng thư viện Swiper Js thì chúng ta sẽ đăng ký thư viện này trước khi tải nội dung file custom js của chúng ta.
public function __construct($data = [], $args = null) {
parent::__construct($data, $args);
wp_register_script( 'tw-test-swiper', plugins_url( 'theweb-elementor-addons/assets/js/tw-test-swiper.js' ),['swiper','elementor-frontend'], TW_VERSION ,true);
}
Nhưng khi nâng cấp lên 3.21, thư viện elementor không được tải theo cơ chế này nữa, vì hệ thống không tải được thư viện Swiper Js nên sẽ không chạy tiếp, và sẽ gây ra lỗi không tải được nội dung file custom js của chúng ta.
Các bạn lập trình mở rộng widget liên quan đến thư viện Swiper lưu ý trước khi nâng cấp lên 3.21 để tránh các lỗi xảy ra không mong muốn.
Tài liệu tham khảo
Tích hợp Swiper Js là một phần của bộ tài liệu hướng dẫn cách tải các tài nguyên đúng cách cho các phiên bản mới của elementor. Các bạn có thể tham khảo thêm tài liệu gốc để biết chi tiết hơn cách tải các tài nguyên khác tại đường dẫn bên dưới.
