Owl carousel plein écran ne fonctionne pas

Je suis en train de faire de la chouette carrousel curseur plein écran pour mon site.
C'est ce dont j'ai besoin, n'hésitez pas à redimensionner Votre navigateur

Et c'est ce que j'ai,

violon

$(document).ready(function() {

  //carousel setup
  $(".owl-carousel").owlCarousel({
    navigation : false,
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem: true,
    autoHeight: true,
    afterMove: top_align,
  });

  function top_align() {
    $(window).scrollTop(0);
    console.log('move');
  }

});

est-il une solution pour corriger ce problème?

Thx

InformationsquelleAutor Lukas | 2015-04-15
  1. 1

    Essayez ceci:

    html, body {
    height: 100%;
    margin: 0;
} 

.owl-wrapper-outer {
    height: 100% !important;    
}

.owl-wrapper {
     height: 100%;   
}

.owl-item {
    height: 100%;
}

.b-Amarelo {
    height: 100%;
}

.owl-item h1 {
    margin: 0;
}

    Démo: Violon

    • Ne peux pas vous remercier assez
    • Merci beaucoup!
    InformationsquelleAutor pqdong
  2. 1

    Lors de l'utilisation d' % pour les hauteurs, vous devez travailler votre chemin vers le bas le DOM de la chaîne à votre enfant de l'élément de la hauteur à appliquer.

    Une autre option est de profiter de vh unités. 100vh = 100% de la hauteur de la fenêtre.

    Juste ajouter 100vh pour .chouette article et votre élément div.

    .owl-item, .item {
    height: 100vh;
}

    Un vh unité est défini comme:

    Égale à 1% de la hauteur de la fenêtre initiale du bloc contenant.

    InformationsquelleAutor Xavier Castaneda