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