Кладка с Flexslider

Question

У меня возникают трудности с работой флекслайдера с макетом Masonry в 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',                        
                    });
                }); 
            },
          });
        });

});