我正在開發(fā)一個 WordPress 網(wǎng)站。我用 Owl Carousel js 插件制作了幾個部分。我正在使用適用于 WordPress 的 Elementor 頁面構(gòu)建器開發(fā)此站點。它在站點預(yù)覽中工作正常，但在 Elementor 實時預(yù)覽中不顯示（在編輯模式下）。
3 回答
慕俠2389804
TA貢獻(xiàn)1719條經(jīng)驗 獲得超6個贊
owl 函數(shù)在錯誤的時間調(diào)用。正如他所提到的，將以下行附加到render()函數(shù)中會使 owl 函數(shù)在正確的時間被調(diào)用。
if (is_admin()){
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
但這并不能解決寬度問題。為了解決 owl 函數(shù)問題和寬度問題，必須將以下代碼行附加到render()函數(shù)中。以下幾行使 owl 函數(shù)在 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>";
}
}
滄海一幻覺
TA貢獻(xiàn)1824條經(jīng)驗 獲得超5個贊
我知道它有點晚了，但我有同樣的問題。
問題是，owl 函數(shù)在錯誤的時間被調(diào)用。（我假設(shè)在頁面加載時）。
只需在渲染函數(shù)的末尾調(diào)用 owl carousel 即可，它應(yīng)該可以工作。
像這樣：
...
protected function render()
{
...
if (is_admin())
{
echo "<script>$('.owl-carousel').owlCarousel();</script>";
}
}
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗 獲得超4個贊
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;
- 3 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消