Каменная кладка с Flexslider

Question

У меня возникли трудности с работой flexslider с масонством в Wordpress. Я уже использую ImagesLoaded, но он не работает с Flexslider из-за этого фрагмента кода.

.flexslider .slides > li { 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 

Я попытался изменить его на нижеследующий, но он не совсем работал так, как я хочу.

.flexslider .slides > li:nth-child (1n+2) { 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 

Мой текущий код JQuery является:

jQuery(function ($) { 

var $container = $('.grid-masonry'); 
     $container.imagesLoaded(function() { 
     $container.masonry({ 
       itemSelector: 'article', 
       singleMode: true, 
      }); 
     }); 

}); 


jQuery(function ($) { 

    $(window).load(function() { 
      $('.flexslider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      prevText: "", 
      nextText: "", 
      }); 
     }); 

}); 

Любой идея, как загрузить FlexSlider первым перед макетом кладки, поэтому разместить элементы не пересекаются?

Answer 1

После поиска дней я наконец нашел решение, которое сработало для меня.

Добавление следующий фрагмент кода в FlexSlider сделал трюк:

start: function(){ 
       var $container = $('.grid-masonry'); 
       $container.imagesLoaded(function() { 
       $container.masonry({ 
         itemSelector: 'article',       
        }); 
       }); 
      }, 

Полная версия:

jQuery(function ($) { 

    $(window).load(function() { 
      $('.flexslider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      prevText: "", 
      nextText: "", 
      start: function(){ 
       var $container = $('.grid-masonry'); 
       $container.imagesLoaded(function() { 
       $container.masonry({ 
         itemSelector: 'article',       
        }); 
       }); 
      }, 
      }); 
     }); 

});