Hình ảnh băng chuyền OWL không đúng kích cỡ lúc đầu tiên

Question

Tôi đang sử dụng băng chuyền OWL và tôi đã mã hóa nó để sẽ có một hình ảnh được hiển thị và sau đó cứ 15 giây hình ảnh tiếp theo sẽ trượt. Tôi đã đặt chiều rộng là 100% màn hình như vậy và mã hóa js một cách thích hợp như vậy trong lý thuyết nên có MỘT hình ảnh tại một thời điểm ở kích thước đầy đủ .... tuy nhiên những gì xảy ra là nó cho thấy tất cả các hình ảnh khá nhỏ và sau đó nếu tôi thay đổi kích thước màn hình ngay cả 1 pixel nó snaps vào phải như thế nào .....

bất kỳ ý tưởng nào về cách tránh phải thay đổi kích thước màn hình để làm cho hình ảnh có kích thước đầy đủ?

Đây là HTML của tôi

<div class="owl-carousel"> 
    <img src="assets/background1.jpg" /> 
    <img src="assets/background2.jpg" /> 
    <img src="assets/background3.jpg" /> 
</div> 

Đây là js của tôi

var owl = $('.owl-carousel'); 
owl.owlCarousel({ 
    singleItem: true, 
    items:1, 
    loop:true, 
    margin:10, 
    autoplay:true, 
    autoplayTimeout:15000, 
    autoplayHoverPause:true 


}); 
$('.play').on('click',function(){ 
    owl.trigger('autoplay.play.owl',[1000]) 
}) 
$('.stop').on('click',function(){ 
owl.trigger('autoplay.stop.owl') 
}) 

Answer 1

Lý do có thể là một trong những cách sau:

1. Hoặc bạn đang gọi phương thức owl.owlCarousel trước khi DOM được tải. Vì vậy, hãy thử bắt đầu nó trong tài liệu đã sẵn sàng.
2. Hoặc div. Carlel carousel của bạn có thể nằm trong vùng chứa không hiển thị khi DOM được tải.

Tôi gặp vấn đề tương tự khi sử dụng băng chuyền cú trong phương thức khởi động và nó đã được sửa bằng cách khởi tạo owlCarousel trong sự kiện shown của phương thức bootstrap.

Hãy cho tôi biết nếu bạn cần thêm chi tiết về điều này hoặc bạn đã khắc phục sự cố.