owl carousel blinken beim laden der Seite

Ich habe mehrere Eule Karussells laufen. Wenn es zum ersten mal lädt das Karussell Blitze mit voller Breite, bis das jquery ins Spiel und dann passt alles. Gibt es trotzdem, um dies zu stoppen? Hier ist mein code:

Html

 <?php $k='1'; do { ?>
 <div id="owlslide<?php echo $k;?>">
     <?php do { ?>
       <div class="owlItem ">
         <-- some other stuff -->
       </div>
     <?php  } while();?>
 </div>
 <?php $i++; } while();?>

Jquery (owl)

 $(document).ready(function(){
<?php $i='1'; do { ?>
 $("#owlslide<?php echo $i;?>").owlCarousel({
  autoPlay: false, //Set AutoPlay to 3 seconds
  paginationNumbers: true,
   itemsCustom : [
    [0, 1],
    [450, 1],
    [600, 2],
    [700, 2],
    [1000, 3],
    [1200, 4],
    [1400, 4],
    [1600, 5]
  ],        
  });
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>

});
  • Sie können hinzufügen, einige Lader zur Seite und entfernen Sie einfach, dass, nachdem alle jquery abgeschlossen.
InformationsquelleAutor Daniel Robinson | 2015-12-02
  1. 8

    Können Sie verstecken die Karussell-Elemente mit display: none; in der CSS, dann zeigen Sie nach dem Karussell hat, initialisiert durch die Bindung einen handler zu initialisiert.Eule.Karussell Veranstaltung. Ich finde es am besten kombinieren es mit einem Platzhalter, der hat ein loader-gif weiter zu reduzieren Seite springen.

    var carousel = $('#owlslide');
carousel.on({

    'initialized.owl.carousel': function () {
         carousel.find('.item').show();
         carousel.find('.loading-placeholder').hide();
    }

}).owlCarousel(options);

    Beachten Sie, dass Sie zum binden der Ereignishandler, bevor Sie Sie initialisieren das Karussell.

    InformationsquelleAutor Taytorious
  2. 2

    immer noch nicht die beste Lösung, aber wenn Sie die "Deckkraft" auf 0, wird es funktionieren, auf einer bestimmten Ebene und alle Einträge werden auf die Seite laden.

    .owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}
    InformationsquelleAutor Kamlesh
  3. 0
    $('.item').trigger('initialized.owl.carousel').show();
    • Herzlich willkommen auf Stackoverflow. Vielen Dank für Ihre Antwort auf diese Frage. Zur Verbesserung dieser Antwort erklären, warum das Problem des OP ist das problem und wo in Ihrem Beispiel-code sollten Sie dies. Weitere Informationen zum schreiben von guten Antworten finden Sie unter stackoverflow.com/help/how-to-answer
    InformationsquelleAutor oliver taylor
  4. 0

    Wenn Sie OwlCarousel2, das plugin fügt die CSS-Klasse .owl-loaded zu den .owl-carousel nachdem es fertig ist die rendering-Karussell-Elemente. Einfach display: none auf die container-und reset - display: block auf die angehängte Klasse.

    also In der CSS-Datei:

    .owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}
    InformationsquelleAutor jbiddick
  5. 0

    Nur verstecken Bilder auf laden und wird automatisch zeigen, wenn das laden abgeschlossen!

    .owl-Karussell.laden{ 

display:none; 

}
    InformationsquelleAutor Pan Bouradas
Schreibe einen Kommentar