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

【问题标题】：Owl Carousel not showing in Elementor live preview猫头鹰轮播未在 Elementor 实时预览中显示
【发布时间】：2020-01-06 15:57:31
【问题描述】：

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

请帮我解决一下。

谢谢。

【问题讨论】：

标签： javascript php wordpress owl-carousel elementor

【解决方案1】：

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

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

但这并不能解决width problem. 为了解决owl 函数问题和宽度问题，以下代码行必须附加render() 函数。以下几行在 elementor 脚本完全加载后加载 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>";
  }
}

【讨论】：

【解决方案2】：

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

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

只需在渲染函数结束时调用 owl carousel 即可。

像这样：


...

protected function render()
{
  ...

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

【讨论】：

【解决方案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;

【讨论】：

虽然这可能是一个很好的答案，但它没有提供任何解释，而且格式也不够好。