Навигация по Flexslider не загружается правильно - PullRequest
0 голосов
/ 05 октября 2018

Flexslider "Slider w / thumbnail slider" доставляет мне проблемы с навигационными стрелками. Я добавляю в шаблон, но сначала проверяю изображения по умолчанию.При наведении курсора на нижнее правое изображение карусели появляется стрелка или анимация навигации.Однако, как вы можете видеть, это не что-то похожее на демо. Вот мой сайт: тестовый сайт
Вот демо: 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));

вот мои функции. Php wp_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 безрезультатно.Любое направление о том, как

...