Zmiana pierwszych elementów dwóch klas w OWL carousel

Witam

Mam karuzelę OWL gdzie są następujące elementy, musiałem poprzez jQuery ukryć elementy owl-item od górnie bo każdy obrazek ma wysuwany element do dołu a jak karuzela miała overflow: hidden to ucinało mi menu tak jak tutaj https://github.com/OwlCarousel2/OwlCarousel2/issues/1908

<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">

I chciałbym żeby przy paginacji następowała zmiana pierwszego elementu owl-item active na hide oraz pierwszego elementu z klasą owl-item na show

Jak to najlepiej zrobić?

Zrobiłem taki skrypcik

 <script type="text/javascript">
    jQuery(function() {
        jQuery('.owl-item:not(.active)').hide();
        jQuery('.owl-next').click(function() {
            if(jQuery('.owl-carousel').change()) {
                jQuery('.owl-item:not(.active)').next().show();

            }

    })
    })

Skrypt nie działa najlepiej bo owszem elementy widoczne są te co trzeba, ale po użyciu paginacji pojawiają się wszystkie ukryte zamiast przesuwać się o jeden element w bok .

Jak to najlepiej rozwiązać?