Cách khởi động lại Owl Carousel sau khi gọi ajax

Question

Tôi đang cố gắng khởi tạo lại băng chuyền cú sau khi thực hiện cuộc gọi ajax thành công. Các cuộc gọi ajax sẽ thay đổi dữ liệu nhưng xem nên ở lại giống nhau.Tôi đang gặp một vấn đề mà xem (cấu trúc băng chuyền) sẽ không reinitialize.Everything là tốt khi tải trang.

im sử dụng phiên bản 1.3.3

$(document).ready(function() { 
$(".owl-carousel").owlCarousel({ 
    items : 3 
}); 
}); 

Ajax gọi

$.ajax({ 
    type: 'get', 
    url: '/public/index', 
    dataType: 'script', 
    data: data_send, 
     success: function(data) { 
     $(".owl-carousel").owlCarousel({ 
     items: 3 
     }); 
     } 
    }); 
} 

Am i thiếu một cái gì đó mà tôi cần phải làm. Tôi đã xem xét vấn đề này trên trang github và đã thử các đề xuất nhưng không có kết quả.

Bất kỳ giúp đánh giá cao

Sửa

từ những lời khuyên cho tôi đã tạo ra hai chức năng

function owlCarousel() { 
    var owl = $(".owl-carousel"); 
    //init carousel 
    owl.owlCarousel(); 
    owl.data('owlCarousel').reinit({ 
    items : 3 
    }); 
} 

function destroyOwlCarousel() { 
    var owl = $(".owl-carousel"); 
    //init carousel 
    owl.owlCarousel(); 
    owl.data('owlCarousel').destroy(); 
    } 
} 

Có vẻ như để làm việc nhưng tự hỏi nếu điều này là cách chính xác để được làm điều này?

Answer 1

Điều này sẽ giúp:

/* 
reinit() method reinitialize plugin 

Syntax: 
owldata.reinit(newOptions) 

Yes! you can reinit plugin with new options. Old options 
will be overwritten if exist or added if new. 

You can easly add new content by ajax or change old options with reinit method. 
*/ 

$('.reinit').click(function(e){ 
e.preventDefault() 
if(booleanValue === true){ 
    booleanValue = false; 
    } else if(booleanValue === false){ 
    booleanValue = true; 
} 

owl.data('owlCarousel').reinit({ 
    singleItem : booleanValue 
    }); 
}) 

Answer 2

Hãy thử $(window).load() thay vì reinitialize

Answer 3

$('#owl-demo').data('owlCarousel').reinit(); 

Answer 4

Hãy thử nó, tồn tại của nó trong owl documention:

//Initialize Plugin 
    $(".owl-carousel").owlCarousel() 

    //get carousel instance data and store it in variable owl 
    var owl = $(".owl-carousel").data('owlCarousel'); 

    owl.reinit(options) 

Answer 5

Ví dụ dưới đây trình.

Khởi tạo băng chuyền:

owl = $("#owl-demo"); 

owl.owlCarousel({ 
    items: 10, 
    autoPlay: 1000, 
}); 

Và khi bạn sử dụng callback ajax, hãy thử:

owl.data('owlCarousel').destroy(); 

owl.owlCarousel({ 
    items: 5, 
    autoPlay: 1000, 
}); 

tôi tạo ra một fiddle để giải thích cho bạn làm thế nào để tái khởi băng chuyền: http://jsfiddle.net/s10bgckL/959/

PS: Tôi không tạo ra một loạt các tùy chọn chỉ khi bạn muốn sửa đổi một số thông số như tốc độ, số lượng các mục được hiển thị, v.v.

Tôi hy vọng điều đó sẽ hữu ích.