猫头鹰旋转木马未显示在元素实时预览中

Question

我正在开发一个WordPress网站。我由猫头鹰旋转木马js插件制作的几个部分。我正在使用WordPress的Elementor页面构建器开发这个网站。它在站点预览中工作正常，但在 Elementor 实时预览(在编辑模式下(中不显示。

请帮我解决问题。

谢谢。

Answer 1

正如@nukeurself所说，猫头鹰函数在错误的时间调用。正如他提到的，将以下行附加到render()函数会使 owl 函数在正确的时间调用。

if (is_admin()){
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}

但这并不能解决宽度问题。为了解决 owl 函数问题和宽度问题，必须将以下代码行附加到render()函数。以下行使 owl 函数在元素脚本完全加载后加载。

...
protected function render()
{
...
if (is_admin())
{
// solves the width issue
// The javascript called after elementor scripts are fully loaded.
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
}

Answer 2

我知道有点晚了，但我遇到了同样的问题。

问题是，猫头鹰函数在错误的时间被调用。(我假设在页面加载时(。

只需在渲染函数结束时调用猫头鹰轮播，它应该可以工作。

这样：

...
protected function render()
{
...
if (is_admin())
{
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
}

Answer 3

if ( Plugin::$instance->editor->is_edit_mode() ) : ?>

<script>    
$('.owl-screenshot').owlCarousel({
loop:true,
autoplay:true,
margin:10,
nav:false,
dots:true,
navText : ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:4
}
}
})
</script>

<?php endif;