Custom owl carousel only working on specific pages

I try to use a custom owl carousel for a text banner slider and this works perfectly on all category pages but the carousel code does not load on pages where other owl sliders already exist (homepage, product pages). On these pages all slides are shown one under the other.

This is the code I am using in my phtml file:

<div class="brands-slide" style="background-color: #000000;">
<div id="brands-slider-demo-8" class="brands-slider">
<div class="owl-carousel-head" style="vertical-align: middle; display: block;">
<div class="item" style="padding-top:10px;padding-bottom:10px;align: center; text-align: center; color: #fbde00; font-size: larger; font-weight: bold;">Slide 1</div>
<div class="item" style="padding-top:10px;padding-bottom:10px;align: center; text-align: center; color: #fbde00; font-size: larger; font-weight: bold;">Slide 2</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'WeltPixel_OwlCarouselSlider/js/owl.carousel.min'
], function ($) {
$("#brands-slider-demo-8 .owl-carousel-head").owlCarousel({
autoplay: true,
autoplayTimeout: 7000,
autoplayHoverPause: true,
margin: 20,
nav: false,
navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],
dots: false,
loop: true,
responsive: {
0: {
items:1
},
640: {
items:1
},
768: {
items:1
},
992: {
items:1
},
1200: {
items:1
}
}
});
});
</script>
</div>
</div>

This only happens with Pearl theme. We do not see this problem with several other themes.