Why doesn't OWL Carousel adapt images inside?

Question

css

/*BEGIN SLIDER*/
 $(".slider").owlCarousel({
  items : 1,
  stopOnHover: true,
  itemsDesktop:[1199,1],
  itemsDesktopSmall:[979,1],
  itemsTablet :[768,1],
  itemsMobile: [479,1]
});
 /*button carousel*/
 $(".next_button").click(function(){
  $(this).parent().find(".slider").trigger("owl.next");
});
 $(".prev_button").click(function(){
  $(this).parent().find(".slider").trigger("owl.prev");
});
 /*button carousel*/

 /*END SLIDER*/

Answer 1

better use CSS. For adaptability (although I use a bootstrap slider, that’s not the point), I usually connect images via background-image: url(...) , and then set properties for the background that make the slider adaptive. that is, position center, size cover (sometimes contain, judging by the resolution of the pictures) and no-repeat, for accuracy. and then I give the blocks several media queries and throw different widths and heights there for different screens. Works with a bang.

Answer 2

Try to style the pictures:
max-width: 100%;
width: auto;
height: auto;
display:block;
And in slider options:
autoHeight: true,
responsiveClass: true,