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

Question

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

Answer 1

owl 函数在错误的时间调用。正如他所提到的，将以下行附加到render()函数中会使 owl 函数在正确的时间被调用。

if (is_admin()){

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

}

但这并不能解决宽度问题。为了解决 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 2

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

问题是，owl 函数在错误的时间被调用。（我假设在页面加载时）。

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

像这样：

...

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;