I'm using OwlCarousel 2.x with jQuery 3.x with pretty common settings, nothing too fancy, but sometimes the centered element is not reliably set to the .center CSS class.

I stripped down my own code to a minimal working example via JSFiddle: https://jsfiddle.net/5oLrz8d3/

     jQuery(document).ready(function() {
        jQuery('#matching_carousel').owlCarousel({
            stagePadding: 80,
            loop: true,
            margin: 20,
            items: 1,
            center: true,
            nav: false,
            responsive:{
                0:    {stagePadding: 80},
                700:  {stagePadding: 120},
                1200: {stagePadding: 170},
            }
        });
    });

Happens in Chrome (uBlock and stuff disabled) as well as Firefox or on Safari or mobile devices. If you drag/drop (via mouse or via touch on your mobile device), depending on how exactly you drop the element, sometimes the element in the center will not have the "center" css class. I mostly get it for the "carpet" image it seems.

As I'm graying and hiding some details of the non-centered elements via CSS, this obviously is quite buddy for the user. Looks like this:

Any clue what might cause the issue here and how to fix it?