我在wordpress主题中遇到猫头鹰轮播问题。
猫头鹰轮播在静态页面中可以正常工作。但是当我将页面转到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)
最佳答案
检查您的代码是否存在任何错误(在Google Chrome浏览器中,请使用Ctrl + Shift + I)。
在某些情况下,也可以将“猫头鹰轮播”更改为其他版本。
例如,如果您使用1.3.2版,请将其更改为2.0版。