Javascript Girl
  1. Javascript Girl
  3. OWL Carousel image pas la bonne taille au début
Intereting Posts
Trouvez la valeur dans le tableau, puis retournez true avec Angular forEach Tâche Gulp.js, retour sur src? Prototype équivalent pour jQuery live function Ajax fonctionne comme .load () supprimer les commentaires du HTML. Comment puis-je garder les commentaires? Ajouter dynamiquement et supprimer les lignes de table La méthode la plus rapide pour échapper aux balises HTML comme entités HTML? Transformez la toile sur imgITools pour faire ico Modèles récursifs Angular2 en javascript ReactJS – push json dans le tableau d'état Faire apparaître la barre de défilement dans les navigateurs mobiles Extraire l'heure à partir de l'heure en utilisant javascript Comment vérifier l'objet vide dans le modèle angulaire 2 en utilisant * ngIf Différence de chaînage dans ES6 Promises et PEP3148 Futures Comment puis-je désactiver la génération d'image auto-affiche sur la balise vidéo? Regex efficace pour la fonction de code postal canadien

OWL Carousel image pas la bonne taille au début

J'utilise OWL Carousel et je l'ai codé pour qu'il y ait une image affichée, puis toutes les 15 secondes, l'image suivante glisse. J'ai défini la largeur pour être à 100% de l'écran et codé les js de manière appropriée, en théorie Il devrait y avoir une image à la fois en pleine taille … mais ce qui se passe, c'est que toutes les images sont plutôt petites et que si je redimensionne l'écran, même un pixel, il s'ajoute à la façon dont il devrait être …..

Une idée sur la façon d'éviter d'avoir à redimensionner l'écran pour que l'image soit pleine taille?

Voici mon HTML 

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

Voici mes 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') })

La raison pourrait être l'une des suivantes:

  1. Vous appelez la méthode owl.owlCarousel avant que le DOM ne soit chargé. Essayez donc de l'initier dans un document prêt.
  2. Ou votre division .owl-carousel peut être dans un conteneur qui n'est pas visible lorsque le DOM est chargé.

Je me suis heurté à un problème similaire pour l'utilisation de carrousel de chouette dans un mode bootstrap et il a été corrigé en lançant owlCarousel dans l'événement shown de bootstrap modal.

Faites-moi savoir si vous avez besoin de plus de détails à ce sujet ou vous l'avez réparé.