javascript - OWL CAROUSEL : image height issue -
hello stackoverflow community.
in new java ee project decided use owl carousel, powerful, flexible, , easy use plugin display available gifts win.
i noticed unwanted behaviour regarding customization of images height.
here image of page using owl carousel without customization of height of images : 
here image of page using owl carousel customization of height of images :
here code i'm using ti generate carousel :
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlcarousel({ items: 6, //10 items above 1000px browser width itemsdesktop: [1199, 4], //5 items between 1000px , 901px itemsdesktopsmall: [979, 3], // betweem 900px , 601px itemstablet: [600, 2], //2 items between 600 , 0 itemsmobile: [479, 1] // itemsmobile disabled - inherit itemstablet option }); // custom navigation events $(".next").click(function() { owl.trigger('owl.next'); }) $(".prev").click(function() { owl.trigger('owl.prev'); }) $(".play").click(function() { owl.trigger('owl.play', 1000); //owl.play event accept autoplay speed second parameter }) $(".stop").click(function() { owl.trigger('owl.stop'); }) });.img { display: inline-block; max-width: 100%; height: 130px; /* problem (if remove it, carousel works !!!! )*/ margin-bottom: 30px; } #owl-demo .item { color: #fff; height: 250px; text-align: center; border: 1px solid rgb(228, 228, 228); border-radius: 0.6em; margin: 3px; background: #93c572; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script> <div class="row"> <h4 style="text-align: center;">cadeaux À votre portée</h4> <div class="customnavigation"> <img src="http://placehold.it/500" style="margin-right: 20px;" /><a class="btn prev"><</a> <a class="btn next">></a> <img src="http://placehold.it/500" style="margin-left: 20px;" /> </div> </div> <div class="row"> <div id="owl-demo" class="owl-carousel owl-theme"> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1700 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1250 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">900 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">3000 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1500 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">900 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 pts</div> </p:panel> <p:panel styleclass="item"> <div class="row"> <p:graphicimage styleclass="img" library="espace" name="http://placehold.it/500" /> </div> <div class="row">lorem ipsum</div> <div class="row"> <p:commandbutton icon="fa fa-shopping-cart" /> </div> <div class="row">1300 pts</div> </p:panel> </div> </div>---edited---
may wasn't clear problem :
- if don't edit height of images inside carousel works fine in first image. (css in separate file)
- if try edit height of images inside carousel page becomes blank in second image. (css in separate file)
i'm not familiar jquery , javascript don't understand reason of behaviour.
----edited 2----
this problem present in google chrome, not in internet explorer , not in mozilla firefox.
i solved problem updating height of images 130px 135px, found solution randomly still don't understand reason behind problem or solution.
old css code :
.img { display: inline-block; max-width: 100%; height: 130px; margin-bottom: 30px; } new css code :
.img { display: inline-block; max-width: 100%; height: *135px*; margin-bottom: 30px;}
Comments
Post a Comment