猫头鹰轮播未在 Elementor 实时预览中显示

Question

我正在开发一个 WordPress 网站。我用 Owl Carousel js 插件制作了几个部分。我正在使用适用于 WordPress 的 Elementor 页面构建器开发此站点。它在站点预览中工作正常，但在 Elementor 实时预览中不显示（在编辑模式下）。

Answer 1

owl 函数在错误的时间调用。正如他所提到的，将以下行附加到render()函数中会使 owl 函数在正确的时间被调用。if (is_admin()){&nbsp; &nbsp;echo "<script>$('.owl-carousel').owlCarousel();</script>";}但这并不能解决宽度问题。为了解决 owl 函数问题和宽度问题，必须将以下代码行附加到render()函数中。以下几行使 owl 函数在 elementor 脚本完全加载后加载。...protected function render(){&nbsp; ...&nbsp; if (is_admin())&nbsp; {&nbsp; &nbsp; // solves the width issue&nbsp; &nbsp; // The javascript called after elementor scripts are fully loaded.&nbsp; &nbsp; if ( ! defined( 'ELEMENTOR_VERSION' ) ) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; echo "<script>$('.owl-carousel').owlCarousel();</script>";&nbsp; }}

Answer 2

我知道它有点晚了，但我有同样的问题。问题是，owl 函数在错误的时间被调用。（我假设在页面加载时）。只需在渲染函数的末尾调用 owl carousel 即可，它应该可以工作。像这样：...protected function render(){&nbsp; ...&nbsp; if (is_admin())&nbsp; {&nbsp; &nbsp; echo "<script>$('.owl-carousel').owlCarousel();</script>";&nbsp; }}

Answer 3

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