My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. Here's a snippet of my code:
HTML
<div id="owl-example" class="owl-carousel">
<div><img src="Images/image1.png" class="br" ></div>
<div><img src="Images/image2.png" class="br" ></div>
</div>
This is a simplified version with only HTML representation.
JQuery
$("#owl-example").owlCarousel({
// Owl carousel features configuration here
})
CSS
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* CSS styles for owl carousel */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
/* More CSS styles for owl carousel */