Chào mọi người ạ. Chuyện là mình đang tính custom owl carousel ra một file js khác để sau này nếu cần thì chỉ cần nhúng vào và gọi ra. Mình xin được trình bày lối đi rồi đến tình trạng lỗi mong mn giúp đỡ.
Mình muốn ra một method cho jQuery để sau này chỉ cần chọn phần tử html bằng bộ chọn jQuery và gọi method
carousel đó ra là mọi thứ được thực hiện.Trong
carousel mình có khai báo biến currentItem để giữ vị trí hiện tại của carousel sau khi thực hiện translate (kiểu như ghi nhớ vị trí image đang được hiển thị để chuyển tiếp đến các image tiếp theo).
Các function như
setAutoplaySpeed, prevPosition, nextPosition nhằm mục đích di chuyển carousel trong các trường hợp mong muốn.Tiếp đó mình có tạo ra một object
built_in_function chứa các phương thức với mục đích thực hiện tất cả chúng khi carousel được khởi tạo
Như nói ở trên là khi tạo carousel thì tất cả các phương thức trong
built_in_funtion sẽ mặc định luôn luôn được chạy. Tuy nhiên lúc này mình muốn ngoài các function mặc định đó được chạy thì khi bắt tay vào tạo ra carousel ta cũng có thể truyền thêm các đoạn code khác vào trong các function mặc định đó. Đoạn này diễn đạt mình cũng thấy hơi khó hiểu, mình xin lấy ví du:Như trong
built_in_function mn thấy đã có một method có sẵn là onTranslate. Mục đích của nó là cập nhật biến currentItem khi carousel thực hiện mỗi lần chuyển đổi (kiểu từ image này sang image kia). Bây giờ khi khởi tạo carousel, ta lại muốn truyền thêm code cũng vào trong phương thức onTranslate đó để thực hiện thêm nhiệm vụ khác.
Vậy là mình viết thêm một funtion xử lý như sau:
Đại loại là function mergeOptions này nhận vào một object tên options (object này chính là những settings khi khởi tạo carousel), sau đó mình thực hiện so sánh các methods trong options đó, nếu method không trùng tên với các method trong built_in_function thì mình thêm chúng vào trong object settingsResult, còn nếu trùng mình sẽ gom chúng lại chạy chung trong một funtion rồi cũng ném vào trong settingsResult. Cuối cùng là trả về settingsResult đó để thực hiện gọi owlCarousel.
Mọi thứ chạy ổn nếu mình thực hiện tạo carousel như hình dưới:
Nó sẽ tạo ra 2 carousel chạy ngon lành. Tuy nhiên, vấn đề xảy ra khi tạo carousel xuất hiện method trùng với method có sẵn ở trong built_in_function trên. Cụ thể ở đây là khi phương thức onTtranslate bị trùng:
Khi này biến curentItem nó cứ bị loạn lên. mình thử console thì biến currentItem đó vẫn đươc cập nhật giá trị bình tường khi carousel thực hiện onTranslate nhưng khi chạy hàm nextPosition hay prevPosition thì nó vẫn cứ giữ ở giá trị ban đầu mà không đổi. Lạ hơn là ban đầu khi chưa có lỗi thì mình có thử kiểm tra thấy các giá trị của currentItem là hoàn toàn không có liên hệ gì với nhau. nhưng khi phương thức onTranslate bị trùng đó thì currentItem của carousel này lại bị ảnh hưởng bởi giá trị currentItem của carousel khác. Mong mn người giúp đỡ mình xử lý phần mergeOptions với ạ vì mình nghĩ mình bị lỗi ở đó. mình xin cảm ơn trước.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?