Here you have used dummy images but you can see result. slider is
working perfectly. https://www.risingwebstars.com/video.webm
Your above code have two mistakes so use below code.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel" id="product-slider">
<?php $loop = new wp_Query(array(
'post_type' => 'home_producten',
'orderby' => 'ID',
'order' => 'ASC',
)); ?>
<?php while ($loop->have_posts()): $loop->the_post(); ?>
<div class="product">
<?php if(has_post_thumbnail()){ the_post_thumbnail(); } ?>
<h3 class="title">
<?php the_title(); ?>
</h3>
<p class="description">
<?php the_content(); ?>
</p>
<a class="btn btn-warning text-uppercase" href="https://wordpress.stackexchange.com/questions/329815/<?php the_permalink(); ?>"> See More </a> </div>
<?php endwhile;?>
</div>
</div>
</div>
</div>
Use this below script because I have found one problem in this script
jsfiddle.net/Youssef_X/omfLuk82/15
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#product-slider").owlCarousel({
loop: true,
items: 3,
itemsDesktop: [1000, 3],
itemsDesktopSmall: [979, 2],
itemsTablet: [768, 2],
itemsMobile: [650, 1],
margin: 10,
nav: true,
autoPlay: true,
dots: false,
autoHeight: false,
});
});
</script>