Owl Carousel not showing in Elementor live preview

Question

I'm developing a WordPress website. There are a few sections that I made by Owl Carousel js plugin. I'm developing this site with Elementor page builder for WordPress. It works fine in site preview but not showing in Elementor Live Preview (in Edit mode).

Please help me with a solution.

Thanks.

Answer 1

As @nukeurself said, the owl function called at the wrong time. As he mentioned appending the following line to render() function makes the owl function called at the right time.

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

But this doesn't solve the width problem. In order to solve both owl function issue and the width issue, the following code lines have to be appended with the render() function. The following lines make the owl function load after the elementor scripts are fully loaded.

...

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

i know its a bit late, but i had the same problem.

The problem is, that the owl function gets called at the wrong time. (I assume at page load).

Just call owl carousel at the end of your render function and it should work.

Like so:

...

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;