jCarousel không được vẽ bên trong một div ẩn

Question

Tôi đang sử dụng div để điền danh sách ul/li và sau đó vẽ một jCarousel ra khỏi nó. Vì vậy, đây hoạt động tốt:

$('#mycarousel').jcarousel(); 

Đây là vấn đề:

Các div chứa các mục ul/li có thể được ẩn bằng cách bấm vào một nút khác. Khi div bị ẩn, và tôi lại kích thước cửa sổ trình duyệt, jCarousel cũng cố gắng vẽ lại chính nó, nhưng vì nó bị ẩn, nó không thể vẽ nó đúng cách. Kết quả là mọi thứ đều lộn xộn trong danh sách (nếu tôi nhấn nút lần nữa để làm cho nó hiển thị). Nhưng một lần nữa nếu tôi tái kích thước cửa sổ ngay bây giờ (jcy lên jCarousel là KHÔNG ẩn bây giờ), nó vẽ lại chính nó.

Tôi đã cố gắng nhận được bản sao của thể hiện jCarousel và tải lại chính nó ngay khi nút được nhấp để hiển thị div (cách nó tự kích thước khi hiển thị và cửa sổ được kích thước lại).

Để có được jCarousel, Tôi đang sử dụng:

JQuery('#mycarousel').data('jcarousel') 

và nó sẽ được trả về như null.

Làm cách nào để lấy jCarousel vẽ chính xác?

Answer 1

Gỡ lỗi nhiều hơn và thấy rằng khi trình duyệt lưu lại (và băng chuyền đã hiển thị), chức năng tải lại của nó được gọi để điều chỉnh vị trí của nó, để giúp bản thân trong trường hợp ẩn/hiển thị div, tôi đã kết thúc cuộc gọi chức năng tải lại của carousel api sau khi div gói được hiển thị.

một chút nỗ lực là để thực sự nắm giữ phiên bản jcarousel. do đó, đó là quy trình gồm hai bước ...

1. lưu giữ trường hợp băng chuyền.

   var cInstance = null; 
   cInitCallback = function(c){ 
       cInstance = c; 
   }; 
   
   $('#mycarousel').jcarousel({ 
        initCallback: cInitCallback, 
   
       }); 
   

2. reload băng chuyền trên chương trình của div

   cInstance.reload(); 
   

Answer 2

Điều gì khiến bạn cho rằng cuộc gọi $().jcarousel() thực hiện bất kỳ điều gì với .data()? Tốt hơn nên gắn bó với API do plugin cung cấp, thay vì đoán cách nó hoạt động dưới mui xe. Dù sao, để trả lời câu hỏi của bạn ...

Vấn đề là khi div bị ẩn, nó không có chiều cao hoặc chiều rộng. Sử dụng "kỹ thuật off-trái" chứ không phải là ẩn div, như thế này:

#mycarousel { 
    height: 100px; /* whatever height your div will have when shown */ 
    width: 100px; /* whatever width your div will have when shown */ 
    position: absolute: 
    left: -10000px; 
} 

Khi bạn muốn hiển thị nó, sử dụng $('#mycarousel').css('position', 'static') để loại bỏ vị trí tuyệt đối, và div sẽ nhảy vào vị trí.

Thông tin thêm một chút here.