無限のスクロール・メーソンリー・カードのスリック・カルーセルは最初のロードで動作しますが、カルーセルは新しいアイテムでは機能しません。

Question

以下は滑らかなカルーセル用のスクリプトです。以下

function slider() { 

     var $arrows = $('.arrows'); 
      var $next = $arrows.children(".slick-next");  
      var $prev = $arrows.children(".slick-prev"); 

      var slick = $('.your-class').slick({ 
       appendArrows: $arrows 
      }); 

      $('.slick-next').on('click', function (e) { 
       var i = $next.index(this) 
       console.log("i", i); 

       slick.eq(i).slickNext(); 

      }); 
      $('.slick-prev').on('click', function (e) { 
       var i = $prev.index(this) 
       slick.eq(i).slickPrev(); 
      }); 
    }; 

    $(document).ready(function(){ 
     slider(); 
    }) 
</script> 

私はPHPでこれらのスクリプトを使用しています無限スクロール石工

<script> 
$(window).load(function(){ 

    var $container = $('#rowmasonry'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.itemmasonry', 
      fitWidth: true, 
      gutter: 0, 

     }); 
    }); 



    $container.infinitescroll({ 
    navSelector : '#page-nav',  
    nextSelector : '#page-nav a', 
    itemSelector : '.itemmasonry', 
    negativeMargin: 250, 
    loading: { 
    finishedMsg: 'No more pages to load.', 
    img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    function(newElements) { 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     $newElems.imagesLoaded(function(){ 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 

    }); 

}); 

</script> 

ためのスクリプトです。私は、無限のスクロール・メーソンリーが破壊され、次のアイテムがロードされるときに再投入されるべきだと考えます。

Answer 1

は、あなたのinfinitescrollコールバック関数でslider();を呼び出してみてください。

$(window).load(function(){ 

var $container = $('#rowmasonry'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.itemmasonry', 
     fitWidth: true, 
     gutter: 0, 

    }); 
}); 

$container.infinitescroll({ 
navSelector : '#page-nav',  
nextSelector : '#page-nav a', 
itemSelector : '.itemmasonry', 
negativeMargin: 250, 
loading: { 
finishedMsg: 'No more pages to load.', 
img: 'http://i.imgur.com/6RMhx.gif' 
} 
}, 
function(newElements) { 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 

slider(); 

}); 

});