flexslider - 使用 Flexslider 砌筑

Question

我在使用 Wordpress 中的 Masonry 布局使 flexslider 工作时遇到了困难。我已经在使用 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',                        
                    });
                }); 
            },
          });
        });

});