砌體，FlexSlider和無限滾動

Question

我正在使用Masinry，並使用無限滾動jQuery插件加載內容，在此內容中，我有不同的FlexSlider幻燈片。 當我使用無限滾動時，滑塊無法正確顯示，下一個帖子恰好位於同一位置，就像石工不會加載flexslider帖子一樣。.我認為FlexSlider jQuery不能很好地加載無限滾動。 這是代碼：

FlexSlider：

<script>jQuery(document).ready(function ($) {
    $(\'#' . $id . '\').flexslider({
    namespace: "flex-",            
    selector: ".slides > li",
    animation: "' . $animation_effect . '",
    direction: "horizontal",            
    animationLoop: true,                
    slideshow: true,   
    slideshowSpeed:' . $slideshow_speed . ',
    animationSpeed:' . $animation_speed . ',
    pauseOnAction: true,     
    pauseOnHover: true,   
    useCSS: true,     
    touch: true,  
    video: true,  
    controlNav: false,  
    directionNav: false, 
    prevText: "",  
    nextText: "",
    });});</script>

砌體+無限滾動

<script>        
        jQuery(document).ready(function($){
            var $container = $('#masonry-content');

            $container.imagesLoaded(function(){
              $container.masonry({
                itemSelector: 'article',
                columnWidth: 1,
              });
            });

            <?php if($missiony_options['archives_infinite_scroll'] == 1) { ?>

            $container.infinitescroll({
              navSelector  : '.archive-nav',    // selector for the paged navigation 
              nextSelector : '.archive-nav .next',  // selector for the NEXT link (to page 2)
              itemSelector : '#masonry-content article',     // selector for all items you'll retrieve
              loading: {
                  finishedMsg: 'No more pages to load.',
                  img: 'http://i.imgur.com/6RMhx.gif',
                  msgText:'',
                }
              },
              // trigger Masonry as a callback
              function( newElements ) {
                // hide new items while they are loading
                var $newElems = $( newElements ).css({ opacity: 0 });
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){
                  // show elems now they're ready
                  $newElems.animate({ opacity: 1 });
                  $container.masonry( 'appended', $newElems, true ); 
                   $("a[rel^='prettyPhoto']").prettyPhoto();
                   $('#slider-74').flexslider();
                  });
              });
            <?php } ?>
        });


    </script>

頁面上的JavaScript內聯，因為我使用了一些PHP變量。 如您所見，在加載infinete滾動以及imageLoader和prettyPhoto之后，我還將新元素添加到Masonry中。 我試圖用FlexSlider做這樣的事情，但是什么也沒做。 如何實現呢？ 請幫助！

這是網絡。

Answer 1

您有語法錯誤-請嘗試調試器

Answer 2

我遇到了同樣的問題，但是我沒有使用石工。

這是無限滾動+ Flexslider的工作示例：）

$('.category-product-wrapper ul.products').infinitescroll({
        loading: {
            img: templateDir+"/images/preloader.gif",
            finishedMsg: "<i class='fa fa-check-circle-o'></i> Content loaded.",
            msgText  : "",   
            speed: 'slow',   
                },
        animate      : false,      
        nextSelector : "ul.page-numbers a:first",
        navSelector : "ul.page-numbers",
        itemSelector : ".product-block",
        bufferPx     : 5,
    },function(){
    // callback when new content is successfully loaded in.
    $('.product-thumb .flexslider').flexslider({    
        animation: "slide",
        useCSS : false,
        slideshow: false,
        controlNav: false,
        directionNav: true,
        controlsContainer: '.flex-container',
        });
    });

基本上，添加新內容時我們需要初始化滑塊，因為Flexslider通常在頁面加載時初始化。

希望這對您有所幫助！ 干杯。

Answer 3

嘗試將此行更改為：

 $('#slider-74').flexslider();

用。。。來代替

$('#slider-74').flexslider({

 animation: "slide"

                })  

flexslider的此初始化必須在砌築方法之后進行。

最好的祝福！