Tengo algunos carruseles de búhos en mi sitio web, ingrese la descripción del enlace aquí , contienen iframe de youtube, a continuación se muestra mi código:
<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>Intenté el siguiente código para hacer que el carrusel se detuviera al pasar el mouse, sin embargo, no funciona:
$('.owl-carousel').on('click', function(event){ var $this = $(this); if($this.hasClass('clicked')){ owl.trigger('play.owl.autoplay'); } else{ owl.trigger('stop.owl.autoplay'); } });¿Alguien puede decirme cómo solucionarlo? Gracias por adelantado