Question

我正在开发WordPress网站。我用Owl Carousel js插件做了几个部分。我正在使用Elementor专为WordPress构建页面的网站。在网站预览中效果很好，但在Elementor Live Preview中（在“编辑”模式下）无法显示。

请帮助我解决问题。

谢谢。

Answer 1

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

问题是，在错误的时间调用了owl函数。（我认为是在页面加载时完成的。）

只需在渲染函数的末尾调用owl carousel，它就可以工作。

像这样：


...

protected function render()
{
  ...

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

Answer 2

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

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

但这并不能解决width problem.的问题，为了同时解决owl函数和宽度问题，必须在render()函数后附加以下代码行。以下几行使owl函数在完全加载elementor脚本后加载。

...

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 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;

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

3 个答案: