我一直在尝试整合owl.carousel 进入我的主题，但无法使其发挥作用。页面上的说明不适用于WordPress，因此我需要有关如何正确排列所需文件和调用（初始化）旋转木马的帮助。
我已将以下文件添加到位于的主题目录中MyTheme/inc/owl/
AjaxLoader。gif抓取。png猫头鹰。旋转木马css猫头鹰。旋转木马js猫头鹰。旋转木马min.js猫头鹰。旋转木马。js；这是；调用Owl初始值设定项函数
/*-------------------------------------------------------------------------------
Add Owl Carousel
-------------------------------------------------------------------------------*/
// Enqueue Scripts/Styles for our owl.carousel.2
function agencyclix_add_owlcarousel() {
wp_enqueue_script ( \'jquery\' );
wp_enqueue_script( \'owlcarousel\', get_template_directory_uri() . \'/inc/owl/owl.carousel.js\', array( \'jquery\' ), false, true );
wp_enqueue_script( \'owlcarousel\', get_template_directory_uri() . \'/inc/owl/owl.carousel.min.js\', array( \'jquery\' ), false, true );
wp_enqueue_script( \'owl-carousel\', get_template_directory_uri() . \'/inc/owl/owl.carousel-init.js\', array( \'jquery\' ), false, true );
wp_enqueue_style( \'owlcarousel-style\', get_template_directory_uri() . \'/inc/owl/owl.carousel.css\' );
wp_enqueue_style( \'owlcarousel-style\', get_template_directory_uri() . \'/inc/owl/owl.theme.css\' );
wp_enqueue_style( \'owlcarousel-style\', get_template_directory_uri() . \'/inc/owl/owl.transitions.css\' );
}
add_action( \'wp_enqueue_scripts\', \'agencyclix_add_owlcarousel\' );
在文件中；猫头鹰旋转木马。js“；我只是添加了网站上列出的初始值设定项函数，它是：
$(document).ready(function(){
$(\'.owl-carousel\').owlCarousel();
});
我还研究了一些使用owl carousel的插件，它们似乎只使用（排队）3个文件来使用owl carousel。
提前感谢
SO网友:Cedon
您正在重用脚本和样式的句柄。这些值必须是唯一的值（请参见WP Codex Reference)
应该是这样的：
wp_enqueue_script( \'owlcarousel\', get_template_directory_uri() . \'/inc/owl/owl.carousel.min.js\', array( \'jquery\' ), false, true );
wp_enqueue_script( \'owlcarousel-init\', get_template_directory_uri() . \'/inc/owl/owl.carousel-init.js\', array( \'jquery\' ), false, true );
wp_enqueue_style( \'owlcarousel-style\', get_template_directory_uri() . \'/inc/owl/owl.carousel.css\' );
wp_enqueue_style( \'owlcarousel-theme\', get_template_directory_uri() . \'/inc/owl/owl.theme.css\' );
wp_enqueue_style( \'owlcarousel-transitions\', get_template_directory_uri() . \'/inc/owl/owl.transitions.css\' );
您不需要将两个owl都排队。旋转木马js和。最小js。这两个文件在功能上应该相同。这个js版本是您希望在开发环境和中使用的完整代码。js是针对较小文件大小而优化的代码的最小化版本，用于生产环境。
SO网友:Dan Fletcher
我并不自称是WP专家（我也不想成为），但我在试图让Owl Carousel为客户在wordpress网站上工作时遇到了同样的问题，我有一个丑陋的解决方案。
首先，正如steamfunk指出的那样，WordPress要求使用所有jQueryjQuery 而不是$.
我的初始化如下所示：
jQuery(function() {
jQuery(\'.owl-carousel\').owlCarousel()
})
我还遇到了如何将init脚本正确排队的问题，所以我决定直接将脚本放入需要旋转木马的模板中。
您仍然可以将其保留在页脚中，只需有条件地回显脚本：
<?php if(is_page(\'name_of_page\')): ?>
<script>
// Your init stuff
</script>
<?php endif ?>
Owl Carousel是我在使用“Wordpress方式”时遇到问题的唯一插件，所以我想这可能是Owl Carousel的问题。我不知道——再说一遍，不是专家。
然而，我的解决方案可能并不优雅，但它适用于我的情况，我无法找到这个问题的好答案，这就是为什么我在这里分享这个问题。
SO网友:steamfunk
你不必让这两只猫头鹰都排队。旋转木马js和猫头鹰。旋转木马min.js，只需min即可。wordpress还要求您将任何jquery放入非冲突包装中。这将进入owl文件。转盘初始化。js，因为这是您已排队的。在您的示例中，您没有将文件“owl.carouselinit.js”排入队列。请查看以下内容，了解owl init代码在非冲突包装中的外观：
jQuery(document).ready(function ($) {
$("#custom-carousel").owlCarousel({
navigation: true, // Show next and prev buttons
navigationText: [
"<i class=\'fa fa-chevron-left icon-white\'></i>",
"<i class=\'fa fa-chevron-right icon-white\'></i>"
],
// pagination : false,
// paginationNumbers: false,
slideSpeed: 300,
paginationSpeed: 400,
items: 3,
itemsCustom: false,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 3],
itemsTabletSmall: true,
itemsMobile: [415, 2],
singleItem: false,
itemsScaleUp: false,
});
});
如您所见，owl carousel需要div的id，而不是类的id。这是一门课。猫头鹰旋转木马，这将是一个id#猫头鹰旋转木马。据我所知，owl carousel要求您使用自定义id名称，如#custom carousel，可以在上面的代码中找到。希望这有助于干杯！
