I have an issue to show and hide image, it’s not working. How to if the owl-carousel active item that has id=”img-dark” will show img id=”dark” div and hide img id=”light”?

I have tried to try this

HTML

<div class="brand-name font-custom">
 <img src="img/logo.svg" class="logoheader" id="logo-light">
 <img src="img/logodark.svg" class="logoheader" id="logo-dark" style="display: none;">
</div>

JQuery

$(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.on('changed.owl.carousel', function(event) {
          var visible = owl.find('.owl-item.active').find('#img-dark').is(':visible');
          if (visible) {
            $("#logo-dark").show();
            $("#logo-light").hide();
          } else {
            $("#logo-dark").hide();
            $("#logo-light").show();
          }
        });
      });

please help me to solve this problem