英文:
Owl Carousel not showing in Elementor live preview
问题
I'm developing a WordPress website. There are a few sections that I made using the Owl Carousel JavaScript plugin. I'm developing this site with the Elementor page builder for WordPress. It works fine in the site preview but is not showing in Elementor Live Preview (in Edit mode).
Please help me with a solution.
Thanks.
英文:
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.
答案1
得分: 4
如@nukeurself所说，猫头鹰功能在错误的时间被调用。正如他提到的，将以下行附加到render（）函数中，可以在正确的时间调用猫头鹰功能。
if (is_admin()){
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
但这并不能解决宽度问题。为了解决猫头鹰功能和宽度问题，必须在render（）函数中附加以下代码行。以下行使猫头鹰功能在Elementor脚本完全加载后加载。
...
protected function render()
{
...
if (is_admin())
{
// 解决宽度问题
// 在Elementor脚本完全加载后调用JavaScript。
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
}
英文:
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>";
}
}
答案2
得分: 1
我知道有点晚，但我遇到了同样的问题。
问题在于，猫头鹰函数在错误的时间被调用。（我假设是在页面加载时）。
只需在您的渲染函数的末尾调用猫头鹰轮播，它应该可以正常工作。
如下所示：
...
protected function render()
{
...
if (is_admin())
{
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
}
英文:
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>";
}
}
答案3
得分: -1
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;
英文:
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论