I have a few owl carousels on my website enter link description here, they contain youtube iframe, below is my code:
<div class="owl-carousel" data-margin="30" data-responsive-lg="5" data-responsive-md="4" data-responsive-sm="3" data-responsive-xs="1" data-nav="" data-loop="true" data-autoplay="true">
<?php foreach($latestprojects as $lp){ ?>
<div id="singam" class="vertical-item item-gallery content-absolute text-center ds">
<article class="vertical-item post type-post status-publish format-video has-post-thumbnail content-padding border-rad-5">
<div>
<iframe src="https://www.youtube.com/embed/<?=$lp->url?>" allowfullscreen="true">
</iframe>
</div>
<div class="item-meta flex-wrap d-flex ds" id="theng">
<a href="blog-single-left.html" style="text-align:center" id="chakkap"><?=$lp->name?></a>
</div>
</article>
</div>
<?php }?>
</div>i tried the below code to make the carousel stop on hover, however its not working:
$('.owl-carousel').on('click', function(event){
var $this = $(this);
if($this.hasClass('clicked')){
owl.trigger('play.owl.autoplay');
} else{
owl.trigger('stop.owl.autoplay');
}
});Can anyone please tell me how to fix it? Thanks in advance