javascript - owl carrousel items with autoWidth -
i trying use latest carousel docs achieve need, want show 3 images in big screens 2 in tablets , 1 in mobile devices, thing achieve before, 1 of images got stretched, tried use auto width, image stopped being stretched, occurs issue carousel don't display items set in responsive object, tries fit container items, can have image ratio, , images continue being responsive:
code:
<section class="content_section bg_gray border_b_n"> <div class="content row_spacer clearfix" style="max-width:939px"> <div class="owl-carousel"> <div class="item"> <img src="image1.png" width="112" height="112" alt="client name"> </div> <div class="item"> <img src="image2.png" width="210" height="40" alt="client name"> </div> <div class="item"> <img src="image3.png" width="210" height="40" alt="client name"> </div> <div class="item"> <img src="image4.png" width="210" height="40" alt="client name"> </div> <div class="item"> <img src="image5.png" width="112" height="112" alt="client name"> </div> <div class="item"> <img src="image6.png" width="210" height="40" alt="client name"> </div> <div class="item"> <img src="image7.png" width="112" height="112" alt="client name"> </div> </div> </div>
$(document).ready(function(){ $(".owl-carousel").owlcarousel({ responsiveclass:true, items: 3, autoplay: true, margin:20, loop:true, mousedrag:false, autowidth:true responsive:{ 0: { items: 1 }, 479: { items: 1 }, 768: { items: 2 }, 979: { items: 3 } } }); });
try -- set max-width:100%
of images
Comments
Post a Comment