Flexslider与砌体的结合

Combining Flexslider with Masonry

本文关键字：结合 Flexslider      更新时间：2023-09-26

我结合了一些jQuery: Flexslider和砌体。Flexslider由global.js触发:

$(window).load(function() {
    // Banner FlexSlider
    $('#side-slider').flexslider({
        animation: 'slide',
        slideshow: true,
        smoothHeight: false,
        controlNav: false,
        directionNav: false,
        slideshowSpeed: 5000,
        controlsContainer: ".flexslider-container",
    });
}); // End on window load

在nwmasonry_init.js:

   jQuery(document).on('ready', function() {
     var $ = jQuery;
     //Masonry
     var container = document.querySelector('.overzicht');
     var msnry = new Masonry(container, {
       itemSelector: '.bedrijven',
       gutter: '.gutter-sizer',
       transitionDuration: 0,
     }); 
   });

在初始页面加载时，可以在这里看到http://nieuws.ditisonzewijk.nl/category/brandevoort/顶部中间的滑块与另一个内容块重叠。

一旦你调整了窗口的大小，滑块就会调整它的宽度，因此滑块的高度就会被修正。

有人知道如何在初始加载时获得滑块的高度吗?

你需要使用imagesloaded.js。重叠是在所有图像加载之前砌筑引起的。加载imagesloaded脚本并尝试以下代码:

jQuery(document).on('ready', function() {
 var $ = jQuery;
 //Masonry
 var container = document.querySelector('.overzicht');
 imagesLoaded(container, function() {
 var msnry = new Masonry(container, {
   itemSelector: '.bedrijven',
   gutter: '.gutter-sizer',
   transitionDuration: 0,
 }); 
 }); 
 });

我已经找到了这个修复，即使它不是很漂亮。我已经把砖石工程推迟了。

function loadMasonry() {    
***fire masonry***    
}        
setTimeout(loadMasonry, 500);

现在它工作正常。有人知道如何正确解决这个问题吗?

相关文章：