Question

flexslider“带有缩略图滑块的滑块”给我带来了导航箭头的麻烦。我要添加到模板中，但首先要使用默认图像进行测试。悬停在右下角的轮播图片上时，会有箭头或导航动画。但是，如您所见，它与演示不一样这是我的网站：test site
这是演示：Flexslider demo
我已经剥离了页面/模板（在子主题中的WP上运行）以删除内容，因此没有任务标签会造成麻烦，除了滑块之外没有其他问题。我已经在静态页面上单独设置了滑块，效果很好。我主题中的其他flexslider示例/样式都很好，这让我感到困惑，因为我还不能真正归咎于父主题，但这也许就是问题所在。寻找任何见识。

这是我的代码：

<?php get_header(); ?>

<div style="width:100%; padding:1em;">

  <div style="width: 80%; margin:0 auto;">

  <div id="main" role="main">
  <section class="slider">
  <div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
     <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
     <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_lemon.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_lemon.jpg" />
    </li>
     <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="/wp-content/themes/almosthome/images/kitchen_adventurer_donut.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>

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

  <!--</div>
  </div> -->
  </div>

</div>

<?php get_footer(); ?>

排队以下内容：

(function ($) {

$(document).ready(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

}(jQuery));

这是我的功能。phpwp_enqueue_scripts

function ah_scripts_method() {

  wp_enqueue_style( 'flexslider-css', get_stylesheet_directory_uri() . '/flexslider/css/flexslider.css', all );


  wp_enqueue_script('jquery');

  wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array(), '2016', true );

  wp_enqueue_script( 'mapping', get_stylesheet_directory_uri() . '/js/mapping.js',  array(), '2016', true );

  wp_enqueue_script( 'cityMaster', get_stylesheet_directory_uri() . '/js/cityMaster.js',  array(), '2017', true );

  wp_register_script( 'flex-js', get_stylesheet_directory_uri() . '/flexslider/js/jquery.flexslider.js', array('jquery'), '', true );
  wp_enqueue_script('flex-js');

  wp_register_script('flexslider-init', get_stylesheet_directory_uri() . '/flexslider/js/flexslider-init.js', array(), '', true );
  wp_enqueue_script('flexslider-init');



}

add_action( 'wp_enqueue_scripts', 'ah_scripts_method' );

没有其他自定义CSS ..仅在子/父主题配置上运行。我调查了jquery.flexslider.js的延期，但没有结果。有关如何的任何方向

Flexslider导航无法正确加载

0 个答案: