OWL Carosello immagine non giusta dimensione in un primo momento

Question

Sto usando OWL Carousel e l'ho codificato in modo che ci sia una immagine visualizzata e poi ogni 15 secondi l'immagine successiva scorrerà. Ho impostato la larghezza al 100% di lo schermo così e codificato il js in modo appropriato quindi in teoria ci dovrebbe essere UNA immagine alla volta a grandezza naturale .... tuttavia ciò che accade è che mostra tutte le immagini piuttosto piccole e poi se ridimensiono lo schermo anche 1 pixel si scatta in come dovrebbe essere .....

qualche idea su come evitare di dover ridimensionare lo schermo per ottenere l'immagine di dimensioni complete?

Ecco il mio HTML

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

Ecco il mio js

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

motivo potrebbe essere uno dei seguenti:

1. O si sta chiamando il metodo owl.owlCarousel prima che il DOM sia caricato. Quindi prova ad avviarlo in un documento pronto.
2. Oppure il div .owl-carosello potrebbe trovarsi in un contenitore non visibile quando il DOM viene caricato.

ho affrontato un problema simile per l'utilizzo di gufo giostra in un modal bootstrap ed è stato risolto avviando owlCarousel in shown caso di modal bootstrap.

Fatemi sapere se avete bisogno di maggiori dettagli su questo o avete risolto.