猫头鹰轮播在 wordpress 主题中不起作用答案

【问题标题】：owl carousel not working in wordpress theme猫头鹰轮播在 wordpress 主题中不起作用
【发布时间】：2015-08-24 03:01:01
【问题描述】：

我在 wordpress 主题中遇到了猫头鹰轮播的问题。 owl carousel 在静态页面中正常工作。但是当我将页面转到 wordpress 主题时，图像（轮播）消失了。

这是我在静态模式下的尝试（猫头鹰轮播工作正常）：

添加的库：

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-rtl.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome-animation.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">

    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/countUp.min.js"></script>
    <script src="js/flowtype.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/mk_theme.js"></script>

HTML：

<!-- Links -->   
 <div class="links">
            <div class="container">
        <div id="links-carousel" class="owl-carousel owl-theme">
          <div class="">
                    <a href="#"><img alt="links" src="img/links/01.png"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="img/links/02.png"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="img/links/03.png"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="img/links/04.png"></a>
                </div>



        </div>
        </div>
 </div>

 <!-- End Links -->

js(mk_theme.js):

var owl = $("#links-carousel");

  owl.owlCarousel({

      itemsCustom : [

        [450, 2],
        [700, 3],
        [1600, 4]
      ],
      navigation : false

  });

我把我的静态页面变成了 wordpress 主题：

在function.php中添加了库

function mes_scripts() {
    wp_enqueue_style( 'owl-carousel', get_template_directory_uri() . '/css/owl.carousel.css', array(), '1.3.3' );
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0' );
    wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.4' );
    wp_enqueue_style( 'bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.min.css', array(), '3.3.2' );
    wp_enqueue_style( 'font-awesome-animation', get_template_directory_uri() . '/css/font-awesome-animation.css', array(), '0.0.7' );



    wp_enqueue_script( 'jquery-1.11.2.min', get_template_directory_uri() . '/js/jquery-1.11.2.min.js', array(), '1.11.2' , true );
    wp_enqueue_script( 'owl-carousel-min', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), false , true );
    wp_enqueue_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.min.js', array(), '1.3', true );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.4' , true );
    wp_enqueue_script( 'countUp', get_template_directory_uri() . '/js/countUp.min.js', array() , false , true );
    wp_enqueue_script( 'flowtype', get_template_directory_uri() . '/js/flowtype.js', array(), '1.1' , true );

    wp_enqueue_script( 'mk-theme', get_template_directory_uri() . '/js/mk_theme.js', array() , false , true );



}


add_action( 'wp_enqueue_scripts', 'mes_scripts' );

index.php:

<!-- Links -->   
 <div class="links">
            <div class="container">
        <div id="links-carousel" class="owl-carousel owl-theme">
          <div class="">
                    <a href="#"><img alt="links" src="<?php echo get_template_directory_uri() . '/img/links/01.png' ?>"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="<?php echo get_template_directory_uri() . '/img/links/02.png' ?>"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="<?php echo get_template_directory_uri() . '/img/links/03.png' ?>"></a>
                </div>
                <div class="">
                    <a href="#"><img alt="links" src="<?php echo get_template_directory_uri() . '/img/links/04.png' ?>"></a>
                </div>



        </div>
        </div>
 </div>

 <!-- End Links -->

我没有更改 wordpress 主题中的 js 代码（mk_theme.js）

【问题讨论】：

控制台有错误吗？
不，那里没有错误。
检查源是否正在加载另一个版本的 jquery（可能由插件请求）并尝试使用 jquery provided by wordpress 而不是主题中包含的那个

标签： javascript php wordpress twitter-bootstrap owl-carousel

【解决方案1】：

检查您的代码是否有任何错误（在 google chrome 中使用 Ctrl + Shift + I）。在某些情况下，它也可以将“owl-carousel”更改为另一个版本。

例如，如果您使用 1.3.2 版，请将其更改为 2.0 beta 版。

【讨论】：