将 Owl Carousel 集成到 Wordpress 中答案

【问题标题】：Integrating Owl Carousel into the Wordrpess将 Owl Carousel 集成到 Wordpress 中
【发布时间】：2016-06-16 14:28:37
【问题描述】：

伙计们，我无法将 Owl Carousel 集成到我的 Wordpress 网站中。我在我的页面上没有看到轮播。谢谢！

我的functions.php代码：

function templatename_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );

wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/assets/js/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/assets/js/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/assets/css/owl.carousel.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/assets/css/owl.theme.default.min.css' );
}
add_action( 'wp_enqueue_scripts', 'templatename_add_owlcarousel' );

owl.carousel.init.js 代码：

$(document).ready(function() {

  $("#owl-demo").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});

index.php 部分带有代码：

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
</div>

<div class="customNavigation">
  <a class="btn prev">Previous</a>
  <a class="btn next">Next</a>
  <a class="btn play">Autoplay</a>
  <a class="btn stop">Stop</a>
</div>

我的文件结构是：

模板名称/assets/css/

owl.carousel.css
owl.carousel.min.css
owl.theme.default.min.css

模板名称/assets/js/

owl.carousel.min.js
owl.carousel.js
owl.carousel-init.js

【问题讨论】：

标签： javascript jquery wordpress owl-carousel

【解决方案1】：

您的 footer.php 代码在哪里？你是不是忘了把你的初始代码放到你的footer.php文件中？

<script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel-init.js"></script>

<script src="<?php bloginfo('template_directory');>/js/owl.carousel.min.js"></script>

【讨论】：

在你的情况下：<script src="<?php bloginfo('template_directory'); ?>/assets/js/owl.carousel-init.js"></script> <script src="<?php bloginfo('template_directory');>/assets/js/owl.carousel.min.js"></script>

【解决方案2】：

wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/assets/css/owl.carousel.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri. '/assets/css/owl.theme.default.min.css' );

问题是你为两个 css 文件设置了相同的句柄名称

【讨论】：