基于WP_EnQueue的OWL Carousel与WordPress集成

我想使用这个特殊的转盘，但似乎不知道如何在Wordpress中初始化它。我偶然发现了一个类似的(How to integrate owl carousel into theme without using a plugin?) 但提供的答案并没有解决我的问题。任何帮助都将不胜感激。谢谢

这是我函数中的代码。php文件（前两个队列不相关）：

function loadup_scripts()
{
    wp_enqueue_script( \'respondjs\', get_template_directory_uri() . \'js/respond.min.js\', array( \'jquery\' ) );
    wp_enqueue_script( \'scriptjs\', get_template_directory_uri() . \'js/script.js\', array( \'jquery\' ) );
    wp_enqueue_script( \'owl-carousel\', get_template_directory_uri() . \'js/owl.carousel.min.js\', array( \'jquery\' ) );
    wp_enqueue_style( \'owl-style-min\', get_stylesheet_directory_uri() . \'css/owl.carousel.min.css\' );
    wp_enqueue_style( \'owl-style-def\', get_stylesheet_directory_uri() . \'css/owl.theme.default.min.css\' );
}

add_action( \'wp_enqueue_scripts\', \'loadup_scripts\' );

这是我在头版上的HTML/引导标记。php：

    <div class="container owl-carousel owl-theme">
    <div class="row">
        <div class="col-sm-12">
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-supplies.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-storage.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-security.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-boxes.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-computer-controlled-03.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-flexible-terms-05.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-insurance-06.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-shipping.svg"/></div>
            <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-units.svg"/></div>                         
        </div>
    </div>
</div>

我还尝试移动。猫头鹰旋转木马和。owl主题类到内部div，但这并没有帮助。

在结束body标记之前，我已经用另一篇文章中的一些php初始化了脚本：

    <?php if(is_page(\'front-page.php\')): ?>
    <script>
        jQuery(document).ready(function(){
            jQuery(".owl-carousel").owlCarousel();
        }); 
    </script>
<?php endif ?>

我不理解的控制台错误。

function loadup_scripts() { wp_enqueue_script( \'respondjs\', get_template_directory_uri() . \'js/respond.min.js\', array( \'jquery\' ), \'\', true ); wp_enqueue_script( \'scriptjs\', get_template_directory_uri() . \'js/script.js\', array( \'jquery\' ), \'\', true ); wp_enqueue_script( \'owl-carousel\', get_template_directory_uri() . \'js/owl.carousel.min.js\', array( \'jquery\' ), \'\', true ); wp_enqueue_style( \'owl-style-min\', get_stylesheet_directory_uri() . \'css/owl.carousel.min.css\' ); wp_enqueue_style( \'owl-style-def\', get_stylesheet_directory_uri() . \'css/owl.theme.default.min.css\' ); } add_action( \'wp_enqueue_scripts\', \'loadup_scripts\' );

<div class="container owl-carousel owl-theme"> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-supplies.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-storage.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-security.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-boxes.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-computer-controlled-03.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-flexible-terms-05.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-insurance-06.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-shipping.svg"/></div> <div><img class="caro-item" src="<?php bloginfo(\'template_directory\'); ?>/img/slider-units.svg"/></div> </div>

JQuery函数仅适用于主页

我的问题是，我的功能中只有一个可以在整个网站上运行，其余的只能在主页上运行。我确信我正确地使用了wp\\u enqueue\\u脚本以及get\\u template\\u directory\\u uri（）这是我的JSFIDLE，一切正常https://jsfiddle.net/TonyTheOnly/dwf1x3eu/非常感谢您的帮助，并感谢您抽出时间。这是我的全部功能。php：<?php function paramo_script_enqueue() {

相关推荐

JQuery函数仅适用于主页