如何将猫头鹰轮播连接到wordpress？答案

【问题标题】：how connect owl carousel to wordpress?如何将猫头鹰轮播连接到wordpress？
【发布时间】：2020-02-08 11:39:38
【问题描述】：

我将猫头鹰轮播滑块集成到 wordpress 主题中。

在function.php中我集成了脚本

	wp_enqueue_script( 'navigation', get_template_directory_uri() . '/assets/jquery/dist/jquery-3.4.1.min.js', array(), 'jquery-3.4.1.min.js', true );
	wp_enqueue_script( 'navigation', get_template_directory_uri() . '/assets/OwlCarousel2-2.3.4/dist/owl.carousel.js', array(), 'OwlCarousel2-2.3.4', true );
	wp_enqueue_script( 'all', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), 'slider', true );

在控制台我有错误 TypeError: jQuery(...).owlCarousel is not a function.

我哪里错了？

【问题讨论】：

wordpress 有一个插件已经有了！
首先验证carousel.js 是否加载在页脚中，然后已经包含在WordPress 中的jQuery 库。

标签： jquery wordpress owl-carousel

【解决方案1】：

使用这个插件OWL CAROUSEL 谢谢

【讨论】：

【解决方案2】：

用于在 WordPress 中使用 Owl Carousel。首先，您需要将脚本排入队列以及文件名functions.php中猫头鹰轮播和查询的样式。

wp_enqueue_style 参考：https://developer.wordpress.org/reference/functions/wp_enqueue_style/ 和 wp_enqueue_script：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

function loadup_scripts()
{
  wp_enqueue_style('owl-carousel-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css', array('jquery'),'2.3.4','all');
wp_enqueue_style('owl-theme-default-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css', array('jquery'),'2.3.4', 'all');

wp_enqueue_script('owl-carousel-js','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js',array('jquery','2.3.4',true);
}

add_action( 'wp_enqueue_scripts', 'loadup_scripts' );

#使用footer中的Wp_footer action调用插件

function livewellnutritionuk_action() { ?>
    <script>
         jQuery(document).ready(function(){

         jQuery('.slider').slick({
          infinite: false,
          speed: 100,
          slidesToShow: 4,
          slidesToScroll: 4,
          autoplay: true,
          prevArrow: '<span class="priv_arrow">&lt;</span>',
          nextArrow: '<span class="priv_arrow">&gt;</span>',
          responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
             ]
            });
    });
    </script>
    <?php
}
add_action('wp_footer', 'livewellnutritionuk_action');

【讨论】：