Почему не успевают загружаться изображения в Slider Pro?

Question

[Дмитрий]

Добрый вечер, разработчики. Решил на сайте wordpress вывести галерею с миниатюрами через https://github.com/dimalepel/slider-pro , а картинки через image acf . Но вот в чем дело. Скрипт slider pro как я понял, не дождавшись полной загрузки картинок начинает делать из них слайдер. В итоге одной картинки виден центр, вторая вся, а третья - 1/10 часть, но в коде они выведены полностью. Пробовал через такой скрипт imagesloaded.desandro.com , что бы дать картинкам загрузиться. Ничего не меняется. Помогите, пожалуйста.
Вот на этой странице слайдер галереи ypmebel.by/kuhni/kuhni-iz-dsp/new-kuhnya-dsp
Вот цикл вывода картинок:

<!-- -- -->
								<div class="slider-pro">								
									<div class="sp-slides">
										<?php while( have_rows('thumb_slider') ): the_row();	$image = get_sub_field('thumb'); ?>
										<div class="sp-slide">										
											<img class="sp-image" src="../src/css/images/blank.gif" data-src="<?php echo $image['url']; ?>"/>	
										</div>	
										<?php endwhile; ?>											
									</div>								
									<div class="sp-thumbnails">	
										<?php while( have_rows('thumb_slider') ): the_row();	$image = get_sub_field('thumb'); ?>
										<img class="sp-thumbnail" src="<?php echo $image['url']; ?>"/>		
										<?php endwhile; ?>									
									</div>							
								</div>
								<!-- // -->

Вот js без loadImages:

// Слайдер миниатюр
$( '.wc-single-catalog_slider .slider-pro' ).sliderPro({
	thumbnailWidth: 90,
	thumbnailHeight: 50,
	autoHeight: true,
	fade: false,
	arrows:  false,
	buttons: false,
	fullScreen: false,
	responsive: true,
	shuffle: true,
	thumbnailArrows: true,
	autoplay: false
});

Где я не доглядел. Дайте совет.

Добавил скрипт с imagesLoader:

var $container = $('.wc-single-catalog_slider .slider-pro');
// Инициализация после загрузки изображений
$container.imagesLoaded( function() {
  $container.sliderPro({
	thumbnailWidth: 90,
	thumbnailHeight: 50,
	autoHeight: true,
	fade: false,
	arrows:  false,
	buttons: false,
	fullScreen: false,
	responsive: true,
	shuffle: true,
	thumbnailArrows: true,
	autoplay: false
});
});

Comments

[Max Medar]

Как imagesLoaded использовал? Как раз он для таких целей и предназначен.

[Дмитрий]

Max Medar: Я добавил скрипт ниже в описании вопроса. При инициализации через него, картинки также не успевают подгрузиться.

[Max Medar]

Дмитрий: а если как-то так?

var $container = $('.wc-single-catalog_slider .slider-pro').imagesLoaded(function () {
  $containersliderPro({
     thumbnailWidth: 90,
     thumbnailHeight: 50,
     autoHeight: true,
     fade: false,
     arrows:  false,
     buttons: false,
     fullScreen: false,
     responsive: true,
     shuffle: true,
     thumbnailArrows: true,
     autoplay: false
   });
});

[Дмитрий]

Max Medar: Проверил. Та же х**нь(